Ist es möglich, Daten zu binden, die für die Negation ("!") Einer booleschen ViewModel-Eigenschaft sichtbar sind?

Ich möchte eine Eigenschaft in meinem ViewModel verwenden, um das anzuzeigende Symbol umzuschalten, ohne eine separate berechnete Eigenschaft der Umkehrung zu erstellen. Ist das möglich?

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

Mein ViewModel hat eine Eigenschaftsperiode, die eine Reihe von Monaten umfasst, wie folgt:

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

Wenn Sie ein Observable in einem Ausdruck verwenden, müssen Sie darauf wie folgt zugreifen:

visible: !charted()

Ich stimme John Papas Kommentar zu, dass es eine eingebaute hiddenBindung geben sollte. Eine dedizierte hiddenBindung bietet zwei Vorteile :

1. Einfachere Syntax, dh. hidden: chartedstatt visible: !charted().
2. Weniger Ressourcen, da Knockout können die beobachtbaren beobachten charteddirekt, anstatt die Schaffung eines computedzu beobachten !charted().

Es ist jedoch einfach genug, eine hiddenBindung wie folgt zu erstellen :

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

Sie können es genau wie die integrierte visibleBindung verwenden:

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

Es ist wenig verwirrend, wie Sie tun müssen

visible:!showMe()

so tat ich

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

Mein Modell ist

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

Geige einchecken http://jsfiddle.net/khanSharp/bgdbm/

Sie könnten meine Schalter- / Fallbindung verwenden, die case.visibleund enthält 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>

Sie könnten es auch als haben

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

Um die Bindung auf Änderungen an der Eigenschaft aufmerksam zu machen, habe ich den sichtbaren Bindungshandler kopiert und invertiert:

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

Haftungsausschluss: Diese Lösung dient nur zu Unterhaltungszwecken.

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

Ich hatte das gleiche Problem damit, wie man ein Gegenteil eines Booleschen Observablen verwendet. Ich habe eine einfache Lösung gefunden:

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

};

Jetzt in Ihrem HTML sollten Sie dies tun

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

Wenn das Programm startet, ist nur "Text1" sichtbar, da "false === false is TRUE" und Text2 nicht sichtbar ist.

Nehmen wir an, wir haben eine Schaltfläche, die das Ereignis "collectPlacesData on click" aufruft. Jetzt ist Text1 nicht sichtbar, da "true === false is FALSE" und Text 2 nur sichtbar ist.

Eine andere mögliche Lösung könnte die Verwendung von berechnetem Observable sein, aber ich denke, es ist eine überkomplizierte Lösung für ein so einfaches Problem.

Kann auch so versteckt verwenden :

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