是否可以将数据绑定显示为布尔ViewModel属性的否定("!")？

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

Answer 1

在表达式中使用observable时,您需要将其作为以下函数访问:

visible: !charted()

Answer 2

我同意约翰帕帕的评论,即应该有一个内置的hidden绑定.专用hidden绑定有两个好处:

1. 更简单的语法,即.hidden: charted而不是visible: !charted().
2. 资源较少,因为Knockout可以charted直接观察到observable ,而不是创建一个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>

Answer 3

你必须这样做,这有点令人困惑

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/