javascript - 数据绑定(bind)不适用于 div 的条件显示

Question

我有以下非常简单的代码示例来测试 div 的条件显示。由于某种原因它不起作用，我想知道是否有人遇到过它。我正在使用 knockout-3.0.0.js。

这是我的 HTML

<div data-bind="if: displayDetail">
    HERE IS THE DETAIL <label data-bind="text: displayDetail"></label>
</div>

<div data-bind="ifnot: displayDetail">
    THERE IS NO DETAIL <label data-bind="text: displayDetail"></label>
</div>
<button data-bind='click: flip'>Flip</button>

这是我的 Javascript

function BooleanViewModel() {
var self = this;
self.displayDetail = ko.observable(false);

// Operations
self.flip = function() {
    //alert("val is " + self.displayDetail);
    if(self.displayDetail){
        self.displayDetail = false;
    }else{
        self.displayDetail = true;        
    }
};

}
ko.applyBindings(new BooleanViewModel());

如果您发现我错过的任何内容，请告诉我

Answer 1

每个可观察量都是一个函数，因此要获取或设置值，您应该使用 ():

self.flip = function() {
    //alert("val is " + self.displayDetail());
    if(self.displayDetail()){
        self.displayDetail(false);
    }else{
        self.displayDetail(true);        
    }
};