是否有可能数据绑定可见的布尔ViewModel属性的否定（“！”）？

我想使用我的ViewModel属性来切换显示哪个图标，而不创build一个单独的计算属性的逆。 这可能吗？

<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

在expression式中使用observable时，需要像下面这样访问它：

visible: !charted()

Answer 2

我同意约翰·帕帕的评论，应该有一个内置的hidden绑定。 专用hidden绑定有两个好处：

1. 简单的语法，即。 hidden: charted而不是visible: !charted() 。
2. 更less的资源，因为Knockout可以直接观察可见的charted ，而不是创build一个computed来观察!charted() 。

但是，创build一个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/

Answer 4

你可以使用我的switch / case绑定，其中包括case.visible和casenot.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> 

Answer 5

为了使绑定知道对属性的更改，我复制了可见绑定处理程序并将其反转：

 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 = ""; } }; 

Answer 6

免责声明：此解决scheme仅用于娱乐目的。

 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 --> 

Answer 7

也可以这样使用隐藏 ：

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