淘汰赛可见绑定不起作用答案

【问题标题】：Knockout visible binding not working淘汰赛可见绑定不起作用
【发布时间】：2012-11-14 06:22:42
【问题描述】：

我有一个非常简单的视图模型：

var ViewModel = function() {
    this.showRow = ko.observable(false);
    this.toggleVisibility = function() {
        if(this.showRow == true){
            this.showRow = false;
        }
        else{
            this.showRow = true;
        }
        alert('showRow is now '+this.showRow); //only here for testing
    };
};

同样简单的标记：

<a href="#" data-bind="click: toggleVisibility">Toggle</a>
<br />
<table>
    <tr data-bind="visible: showRow">Some Text</tr>
</table>

我的问题是，当点击链接时，会显示警告框（显示正确的值 - 真/假）

但是，tr 元素上的可见绑定似乎不起作用 - 无论是最初（该行在加载时应该是不可见的）还是在 showRow 的值切换时。

上面的jsFiddle-http://jsfiddle.net/alexjamesbrown/FgVxY/3/

【问题讨论】：

this.showRow = 表示您正在覆盖“可观察”属性。当您使用 observable 时，该属性是一个函数，而不仅仅是一个值。
为了补充 James D'Angelo 的观点，如果您想更新可观察属性的值，请将值作为参数传递给该属性。 'this.showRow(false)';

标签： javascript knockout.js

【解决方案1】：

你需要修改你的html如下：

<table>
    <tr data-bind="visible: showRow"><td>Some Text</td></tr>
</table>

和JavaScript如下：

var ViewModel = function() {
    var self = this;
    self.showRow = ko.observable(false);
    self.toggleVisibility = function() {

        self.showRow(!self.showRow());
        alert('showRow is now ' + self.showRow());
    };
};

ko.applyBindings(new ViewModel());

将值设置为可观察属性的语法是：self.showRow(value);

如果需要在标签内有标签。

我还修改了您的小提琴以简化 javascript 并遵循关于“this”的新代码实践。见http://jsfiddle.net/FgVxY/4/

【讨论】：

不知道为什么这是选择的答案 - 问题是原始问题下的 cmets 所说的 - 不正确地分配给可观察到的淘汰赛。