So funktionieren Bindungen in KnockoutJs

Dieser Inhalt ist im Grunde eine Übersetzung der Originalmaterialien. Ziel ist es, mehr über KnockoutJs für Magento 2 zu erfahren und Inhalte auf Portugiesisch über KnockouJs zu erstellen.

Dokumentation

• Die Datenbindungssyntax
• Bindungskontext

Bindungen

In KnockoutJs sind Bindungen die Möglichkeit, die Logik des ViewModel (die Daten- und Geschäftslogik) mit der Ansicht (HTML) zu verbinden. Kurz gesagt: Durch Bindungen spiegelt die Benutzeroberfläche automatisch Änderungen in Ihren Daten wider, ohne dass das DOM direkt manipuliert werden muss.

Bindungen in KnockoutJs funktionieren über das data-bind-Attribut für HTML-Elemente. In diesem Attribut geben Sie die Bindung an, die Sie verwenden möchten, und die zugehörigen Werte.

Das data-bind-Attribut ist nicht nativ in HTML, obwohl es durchaus akzeptabel ist (es ist streng kompatibel mit HTML 5 und verursacht keine Probleme mit HTML 4). Da der Browser dieses Attribut jedoch standardmäßig nicht erkennt, benötigen Sie um Knockout zu aktivieren, damit es wirksam wird.

Bindungssyntax

Das deklarative Bindungssystem von KnockoutJs bietet eine übersichtliche und leistungsstarke Möglichkeit, Daten an die Benutzeroberfläche zu binden. Normalerweise ist es einfach und naheliegend, an einfache Dateneigenschaften zu binden oder eine einzelne Bindung zu verwenden. Bei komplexeren Bindungen hilft es, das Verhalten und die Syntax des KnockoutJs-Bindungssystems besser zu verstehen.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

Ein Anruf besteht aus zwei Elementen, dem Namen und dem Wert des Anrufs, getrennt durch einen Doppelpunkt. Ein Element kann mehrere (verwandte oder nicht verwandte) Links enthalten, wobei jeder Link durch ein Komma getrennt ist. Die in den aktuellen Bindungen verwendeten Daten können von einem Objekt referenziert werden. Dieses Objekt heißt Binding Context (Binding Context).

Der Bindungswert kann ein einzelner Wert, eine Variable oder ein Literal oder fast jeder gültige JavaScript-Ausdruck sein.

Links können beliebig viele Leerzeichen (Leerzeichen, Tabulatoren und Zeilenumbrüche) enthalten, sodass Sie sie verwenden können, um Ihre Links nach Ihren Wünschen zu organisieren.

Links können Kommentare im JavaScript-Stil enthalten (//... und /*...*/). Zum Beispiel:

Wenn eine Bindung ohne Wert angegeben wird, gibt KnockoutJs der Bindung den Wert undefiniert.

Die Kontexthierarchie wird automatisch von KnockoutJS erstellt und verwaltet. Im Folgenden sind die verschiedenen Arten von Bindungskontexten aufgeführt, die von KO bereitgestellt werden.

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

Der Verbindungsname sollte im Allgemeinen mit einer registrierten Verbindung (integriert oder benutzerdefiniert) übereinstimmen oder ein Parameter für eine andere Verbindung sein. Wenn der Name mit keinem von ihnen übereinstimmt, ignoriert KnockoutJs ihn (ohne Fehler oder Warnungen). Sollte also eine Verbindung nicht funktionieren, prüfen Sie zunächst, ob der Name korrekt ist.

Der Bindungswert kann ein einzelner Wert, eine Variable oder ein Literal oder fast jeder gültige JavaScript-Ausdruck sein. Hier sind Beispiele für verschiedene Verbindungswerte:

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

Das obige ist der detaillierte Inhalt vonSo funktionieren Bindungen in KnockoutJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!