是否可以对布尔视图模型属性的否定("!")可见的数据绑定？

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>

我的视图模型有一个属性周期，它是一个月份数组，如下所示：

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

Answer 1

在表达式中使用可观察量时，您需要将其作为函数访问，如下所示：

visible: !charted()

Answer 2

我同意 John Papa 的评论，即应该有一个内置的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>

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

您可以使用我的开关/大小写绑定，其中包括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

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

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

我在如何使用布尔可观察量的相反方面遇到了同样的问题。我找到了一个简单的解决方案：

var ViewModel = function () {
var self = this;
// When program start, this is set to FALSE
self.isSearchContentValid = ko.observable(false);

self.gatherPlacesData = function () {
   // When user click a button, the value become TRUE
   self.isSearchContentValid(true);
};

现在在你的 HTML 上你应该这样做

<p data-bind = "visible:isSearchContentValid() === false"> Text 1</p>
<p data-bind = "visible:isSearchContentValid"> Text 2</p>

当程序启动时，只有"Text1"可见，因为"false===false是TRUE"，而Text2不可见。

假设我们有一个按钮，用于调用 gatherPlacesData on click 事件。现在文本 1 将不可见，因为"true === false 是 FALSE"，而文本 2 仅可见。

另一种可能的解决方案可能是使用计算可观察的，但我认为对于如此简单的问题来说，这是一个过于复杂的解决方案。

Answer 8

也可以

像这样使用隐藏：

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