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);
};
knockout.js
agradl
quelle
quelle
Antworten:
Wenn Sie ein Observable in einem Ausdruck verwenden, müssen Sie darauf wie folgt zugreifen:
visible: !charted()
quelle
hidden
Bindung in v3.5.0Ich stimme John Papas Kommentar zu, dass es eine eingebaute
hidden
Bindung geben sollte. Eine dediziertehidden
Bindung bietet zwei Vorteile :hidden: charted
stattvisible: !charted()
.charted
direkt, anstatt die Schaffung einescomputed
zu beobachten!charted()
.Es ist jedoch einfach genug, eine
hidden
Bindung wie folgt zu erstellen :Sie können es genau wie die integrierte
visible
Bindung verwenden:quelle
return !ko.utils.unwrapObservable(valueAccessor());
hidden
Bindung gemäß Ihrem Kommentar korrigiert . (Übrigens habe ich CoffeeScript in meinem Projekt verwendet, als ich dies ursprünglich gepostet habe. Die Syntax von CoffeeScript macht es nicht offensichtlich, wenn eine Rückgabe beabsichtigt ist.)Es ist wenig verwirrend, wie Sie tun müssen
so tat ich
Mein Modell ist
Geige einchecken http://jsfiddle.net/khanSharp/bgdbm/
quelle
Sie könnten meine Schalter- / Fallbindung verwenden, die
case.visible
und enthältcasenot.visible
.Sie könnten es auch als haben
quelle
Um die Bindung auf Änderungen an der Eigenschaft aufmerksam zu machen, habe ich den sichtbaren Bindungshandler kopiert und invertiert:
quelle
Haftungsausschluss: Diese Lösung dient nur zu Unterhaltungszwecken.
quelle
Ich hatte das gleiche Problem damit, wie man ein Gegenteil eines Booleschen Observablen verwendet. Ich habe eine einfache Lösung gefunden:
Jetzt in Ihrem HTML sollten Sie dies tun
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.
quelle
Kann auch so versteckt verwenden :
quelle