So funktionieren Kontrollflussbindungen 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
• Die „foreach“-Bindung
• Die „if“- und „ifnot“-Bindungen
• Die „with“- und „using“-Bindungen
• Die „let“-Bindung

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.

Kontrollfluss

für jeden

Die Bindung foreach wird verwendet, um Wiederholungen in HTML-Elementen zu erstellen und Kopien desselben Elements für jedes Element in einer Sammlung zu generieren (wie ein Array oder ein observable Array). ) in Ihrem Ansichtsmodell. Dadurch können Sie ganz einfach Listen oder Pivot-Tabellen erstellen, die Daten aus Ihrem Modell anzeigen.

Wenn der Inhalt des Modell-Arrays geändert wird (durch Hinzufügen, Verschieben oder Löschen seiner Einträge), verwendet die Bindung von foreach einen effizienten Algorithmus zum Suchen Finden Sie heraus, was sich geändert hat, damit Sie das DOM entsprechend dem Array aktualisieren können. Dies bedeutet, dass beliebige Kombinationen simulierter Änderungen verarbeitet werden können.

• Wenn dem Array etwas hinzugefügt wird, rendert foreach neue Kopien Ihres Modells und fügt sie in das vorhandene DOM ein;
• Wenn etwas im Array gelöscht wird, entfernt foreach einfach die entsprechenden DOM-Elemente;
• Wenn Sie etwas im Array neu anordnen (wobei dieselben Objektinstanzen beibehalten werden), verschiebt foreach normalerweise nur die entsprechenden DOM-Elemente an ihre neue Position.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

In diesem Fall verweist die Variable $data auf das aktuelle Element, das in der Schleife verarbeitet wird. Dadurch können Sie innerhalb der Schleife auf die Eigenschaften oder Werte dieses Elements zugreifen.

Mit der as-Direktive können Sie einen benutzerdefinierten Namen für die Variable definieren, die das aktuelle Element im foreach-Iterationszyklus darstellt. Dies kann den Code lesbarer und aussagekräftiger machen.

Manchmal ist es notwendig, dass ein Element im Array nicht gelöscht, sondern ausgeblendet wird, ohne tatsächlich den Überblick über seine Existenz zu verlieren. Dies wird als zerstörungsfreies Löschen bezeichnet. Wenn Sie zerstörte Einträge ausblenden müssen, setzen Sie die Option includeDestroyed auf false.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

Wenn Sie zusätzliche benutzerdefinierte Logik für die generierten DOM-Elemente ausführen müssen, können Sie einen der folgenden Rückrufe verwenden:

• afterRender: wird jedes Mal aufgerufen, wenn der foreach-Block dupliziert und in das Dokument eingefügt wird, sowohl wenn foreach zum ersten Mal initialisiert wird als auch wenn später neue Einträge zum zugehörigen Array;
hinzugefügt werden
• afterAdd: ist wie afterRender, außer dass es nur aufgerufen wird, wenn neue Einträge zum Array hinzugefügt werden (und nicht, wenn foreach zuerst den ursprünglichen Inhalt des Array durchläuft);
• beforeRemove: wird aufgerufen, wenn ein Element aus dem Array entfernt wird, jedoch bevor die entsprechenden DOM-Knoten entfernt werden. Wenn ein beforeRemove-Rückruf angegeben ist, müssen Sie DOM-Knoten manuell entfernen, d. h. KnockoutJs kann nicht wissen, wann es erlaubt ist, DOM-Knoten physisch zu entfernen;
• beforeMove: wird aufgerufen, wenn ein Element aus dem Array seine Position im Array geändert hat, aber bevor die entsprechenden DOM-Knoten verschoben wurden. Beachten Sie, dass beforeMove für alle Array-Elemente gilt, deren Indizes sich geändert haben. Wenn also ein neues Element am Anfang eines Arrays eingefügt wird, wird der Rückruf (falls angegeben) für alle anderen Elemente als dessen Index ausgelöst Die Position hat sich um eins erhöht. Sie können beforeMove verwenden, um die ursprünglichen Bildschirmkoordinaten betroffener Elemente zu speichern, damit Sie deren Bewegungen im afterMove-Rückruf animieren können;
• afterMove: wird aufgerufen, nachdem ein Element aus dem Array seine Position im Array geändert hat und nachdem foreach das DOM entsprechend aktualisiert hat. Beachten Sie, dass afterMove für alle Elemente des Arrays gilt, deren Indizes sich geändert haben. Wenn also ein neues Element am Anfang eines Arrays eingefügt wird, wird der Rückruf (falls angegeben) ausgelöst für alle anderen Elemente, da sich ihre Indexposition um eins erhöht hat.

wenn und wenn nicht

Die Bindung von if bewirkt, dass ein Markup-Abschnitt nur dann in Ihrem Dokument angezeigt wird (und seine Datenbindungsattribute angewendet werden), wenn ein angegebener Ausdruck als wahr (oder ein wahrer Wert, z. B. a) ausgewertet wird Nicht-Null-Objekt oder ein nicht leerer String).

Die Bindung von ifnot funktioniert genau wie die if-Bindung, außer dass sie das Ergebnis jedes Ausdrucks umkehrt, der an sie übergeben wird.

if und ifnot spielen eine ähnliche Rolle wie die sichtbaren und verborgenen Bindungen. Der Unterschied besteht darin, dass bei sichtbarem Markup das enthaltene Markup immer im DOM verbleibt und immer seine Datenbindung angewendet wird – sichtbare Bindung verwendet lediglich CSS, um die Sichtbarkeit des enthaltenden Elements umzuschalten. Der if-Link fügt jedoch das in Ihrem DOM enthaltene Markup physisch hinzu oder entfernt es und wendet Links nur dann auf Nachkommen an, wenn der Ausdruck wahr ist. Wenn der Ausdruck einen beobachtbaren Wert beinhaltet, wird der Ausdruck jedes Mal neu ausgewertet, wenn sich sein Wert ändert.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

mit und nutzen

Die Bindungen with und using erstellen einen neuen Bindungskontext, sodass untergeordnete Elemente im Kontext eines angegebenen Objekts gebunden werden.

Binding with fügt dynamisch untergeordnete Elemente hinzu oder entfernt sie, abhängig davon, ob der zugehörige Wert falsch ist.

Mit dieser Option können Sie einen Alias für das neue Kontextobjekt definieren. Es ist zwar möglich, mithilfe der Kontextvariablen $data.
auf das Objekt zu verweisen

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

Die using-Bindung wurde in KnockoutJs 3.5 als Ersatz für with eingeführt, wenn das Rendern untergeordneter Elemente nicht erwünscht ist. Da die Verwendung untergeordnete Verbindungen neu auswertet und nicht neu rendert, enthält jede untergeordnete Verbindung eine zusätzliche Abhängigkeit vom Verwendungskontext.

lassen

Mit der Bindung können Sie benutzerdefinierte Bindungskontexteigenschaften definieren, auf die Sie in den Bindungen aller untergeordneten Elemente verweisen können.

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

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