Looking for knockout.js Keywords? Try Ask4Keywords

knockout.jsBindungen


Syntax

  • <!-- ko if:myObservable --><!-- /ko -->
  • <i data-bind="if:myObservable"></i>

Bemerkungen

Was für eine Bindung ist

Im Wesentlichen ist eine Bindung oder eine Datenbindung eine Möglichkeit, Ihre ViewModels mit Ihren Ansichten (Vorlagen) zu verknüpfen und umgekehrt. KnockoutJS verwendet eine bidirektionale Datenbindung. Dies bedeutet, dass Änderungen an Ihrem ViewModel die Ansicht beeinflussen und Änderungen an Ihrer Ansicht das ViewModel beeinflussen können.

Unter der Haube (kurze Übersicht)

Bindungen sind lediglich Plugins (Skripte), mit denen Sie eine bestimmte Aufgabe lösen können. Diese Aufgabe wird meistens so geändert, dass das Markup (html) entsprechend Ihrem ViewModel geändert wird.

Mit einer Textbindung können Sie beispielsweise text anzeigen und dynamisch ändern, wenn sich ViewModel ändert.

KnockoutJS verfügt über viele leistungsstarke Bindungen, mit denen Sie Ihre eigenen benutzerdefinierten Bindungen erweitern können.

Und am wichtigsten ist, dass Bindungen nicht magisch sind, sie arbeiten nach einem Satz von Regeln und wann immer Sie unsicher sind, was eine Bindung bewirkt, welche Parameter sie benötigt oder wann sie die Ansicht aktualisiert, können Sie auf den Quellcode der Bindung verweisen.

Betrachten Sie das folgende Beispiel einer benutzerdefinierten Bindung:

ko.bindingHandlers.debug = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.computed(function () {
            var value = ko.unwrap(valueAccessor());
    
            console.log({
                value: value,
                viewModel: viewModel,
                bindingContext: bindingContext
            });
        }, null, { disposeWhenNodeIsRemoved: element });
    }
};
  1. Eine Bindung hat einen Namen - debug so dass Sie wie folgt verwenden können:

data-bind="debug: 'foo'"

  1. Die init Methode wird einmal aufgerufen, wenn die Bindung initiiert wird. Der Rest der Aktualisierungen wird von einem anonymen Rechner verarbeitet, der beim Entfernen des element verworfen wird.
  2. Die Bindung gibt mehrere Konsolen aus: Der übergebene Wert in unserem Beispiel ist foo (dieser Wert kann auch beobachtet werden, da ko.unwrap Methode ko.unwrap zum Lesen verwendet wird), das aktuelle viewModel und bindingContext.
  3. Immer wenn sich der übergebene Wert ändert, druckt die Bindung aktualisierte Informationen an die Konsole.
  4. Diese Bindung kann nicht mit virtuellen Elementen (in HTML-Kommentaren) nur für echte Elemente verwendet werden, da ko.virtualElements.allowedBindings.debug Flag ko.virtualElements.allowedBindings.debug nicht auf true gesetzt ist.

Wann werden Klammern verwendet?

Ohne zusätzliche Plugins verfügt KnockoutJS nur über Live-View-Updates für Eigenschaften im ViewModel, die beobachtbar sind (regelmäßig observable , aber auch computed , pureComputed , observableArray usw.). Ein Observable würde folgendermaßen erstellt:

var vm = { name: ko.observable("John") };

In diesem Fall ist vm.name eine Funktion mit zwei separaten "Modi":

  1. Getter: vm.name() erhält ohne Argumente den aktuellen Wert.
  2. Setter: vm.name("Johnnyboy") setzt mit einem Argument einen neuen Wert.

In den integrierten Datenbindungen können Sie immer das Getter-Formular verwenden, und manchmal können Sie sogar die Klammern weglassen , und die Bindung "fügt" sie effektiv für Sie hinzu. Also diese sind gleichwertig:

<p data-bind="text: name"></p> ... will work
<p data-bind="text: name()"></p> ... works too

Dies wird jedoch fehlschlagen:

<p data-bind="text: 'Hello, ' + name + '!'"></p> ... FAILS!

Denn sobald Sie etwas "tun" möchten, bevor Sie einen Wert an eine Datenbindung übergeben, einschließlich Wertvergleiche, müssen Sie die Werte für alle Observables richtig "abrufen", z.

<p data-bind="text: 'Hello, ' + name() + '!'"></p> ... works

Weitere Informationen finden Sie auch in diesem Q & A.

Bindungen Verwandte Beispiele