javascript - knockout 可见绑定(bind)不起作用

Question

我有一个非常简单的 View 模型:

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>

我的问题是，当点击链接时，警告框显示(显示正确的值 - true/false)

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

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

Answer 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);

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

我还修改了您的 fiddle 以简化 javascript 并遵循与“this”相关的更新代码实践。参见 http://jsfiddle.net/FgVxY/4/