knockout.js - 是否有可能將數據綁定可見到布爾ViewModel屬性的否定(“!”)?




4 Answers

在表達式中使用observable時,需要像下面這樣訪問它:

visible: !charted()

我想在我的ViewModel上使用一個屬性來切換顯示哪個圖標而不創建逆的單獨計算屬性。 這可能嗎?

<tbody data-bind="foreach: periods">
  <tr>
    <td>
      <i class="icon-search" data-bind="visible: !charted, click: $parent.pie_it"></i>
      <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>
    </td>
  </tr>
</tbody>

我的ViewModel有一個月份數組的屬性句點,如下所示:

var month = function() {
    this.charted = ko.observable(false);
};



這是一點困惑,因為你必須這樣做

visible:!showMe()

所以我做了

<span data-bind="visible:showMe">Show</span>
<span data-bind="visible:!showMe()">Hide</span>
<label><input type="checkbox" data-bind="checked:showMe"/>toggle</label>​

我的模型是

var myModel={
    showMe:ko.observable(true)
}
ko.applyBindings(myModel);    

檢查小提琴http://jsfiddle.net/khanSharp/bgdbm/




為了使綁定知道屬性的更改,我複制了可見綁定處理程序並將其反轉:

ko.bindingHandlers.hidden = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var isCurrentlyHidden = !(element.style.display == "");
        if (value && !isCurrentlyHidden)
            element.style.display = "none";
        else if ((!value) && isCurrentlyHidden)
            element.style.display = "";
    }
};



也可以這樣使用隱藏

 <div data-bind="hidden: isString">
                            <input type="text" class="form-control" data-bind="value: settingValue" />
                        </div>



Related