敲除可見綁定無法正常工作

Question

我有一個非常簡單的視圖模型：

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/

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

將值設置為observable屬性的語法是： self.showRow(value);

如果需要在標簽內部有標簽。

我還修改了你的小提琴，以簡化javascript並遵循關於“this”的新代碼實踐。 見http://jsfiddle.net/FgVxY/4/