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



Answers

我同意約翰帕帕的評論,應該有一個內置的hidden綁定。 專用hidden綁定有兩個好處:

  1. 簡單的語法,即。 hidden: charted而不是visible: !charted()
  2. 更少的資源,因為Knockout可以直接觀察可觀察的charted ,而不是創建computed以觀察!charted()

但是,創建hidden綁定非常簡單,但是,像這樣:

ko.bindingHandlers.hidden = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.visible.update(element, function() {
      return !ko.utils.unwrapObservable(valueAccessor());
    });
  }
};

您可以像內置visible綁定一樣使用它:

<i class="icon-search" data-bind="hidden: charted, click: $parent.pie_it"></i>
<i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>
Question

我想在我的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);
};



免責聲明:此解決方案僅用於娛樂目的。

ko.extenders.not = function (target) {
    target.not = ko.computed(function () {
        return !target();
    });
};

self.foo = ko.observable(true).extend({ not: null });

<div data-bind="text: foo"></div>     <!-- true -->
<div data-bind="text: foo.not"></div> <!-- false -->

<!-- unfortunately I can't think of a way to be able to use:
    text: foo...not
-->



您可以使用我的switch/case case.visible裝訂,其中包括case.visiblecasenot.visible

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

你也可以擁有它

        <i class="icon-search" data-bind="casenot.visible: charted, click: $parent.pie_it"></i>
        <i class="icon-remove" data-bind="case.visible: $else, click: $parent.pie_it"></i>



Links