Anfängerleitfaden zu Knockoutjs: Teil 3

Key Takeaways

• Verwenden Sie die "foreach" -Bindung in KnockoutJs, um automatisch die Markupabschnitte für jedes Element in einem Array zu duplizieren und zu binden, z. B. dynamische Generierung von Tabellenzeilen oder Listenelemente basierend auf Array -Daten.
Nutzen Sie Pseudovariablen wie "$ data", "$ parent", "$ Eltern" und "$ root" in verschachtelten Bindungen, um Daten aus verschiedenen Ebenen Ihres Ansichtsmodellhierarchie effektiv zuzugreifen und zu manipulieren.
Implementieren Sie die "If` und" mit "mit" mit "Bindungen, um Abschnitte Ihrer Benutzeroberfläche bedingt zu rendern und neue Bindungskontexte zu erstellen, wodurch die Dynamik und Lesbarkeit Ihrer Anwendung verbessert wird.
Erforschen Sie die Templatierungsfunktionen von KnockoutJS, die sowohl native Templating mithilfe von Kontroll-Flow-Bindungen als auch erweiterte Szenarien mit der "Template" -Bindung mit Optionen zum Übergeben zusätzlicher Parameter und Rückrufe ermöglichen.
• .
• Knockout Observables erweitern und benutzerdefinierte Bindungen erstellen, um komplexe Verhaltensweisen und Interaktionen zu verkapulieren, wodurch wiederverwendbare Lösungen bereitgestellt werden, die saubere und überschaubare Codebasen aufrechterhalten.

Ein Anfängerleitfaden zu KnockoutJs: Vorlagen und mehr

Es gibt vier Kontrollstrahlbindungen: foreach, wenn ifnot und mit. Mit diesen Kontrollbindungen können Sie die Kontroll-Flow-Logik deklarativ definieren, ohne eine benannte Vorlage zu erstellen, wie Sie unten angezeigt werden.

Die bindung doppelt einen Markup -Abschnitt für jeden Eintrag in einem Array und bindet jede Kopie dieses Markups an das entsprechende Array -Element. Dies eignet sich zum Rendern von Listen oder Tabellen. Wenn es sich bei Ihrem Array um ein beobachtbares Array handelt, addieren oder entfernen Sie später Array -Einträge, die Bindung aktualisiert die Benutzeroberfläche, indem Sie mehr Kopien der Listenelemente oder Tabellenreihen einfügen oder entfernen, ohne andere DOM -Elemente zu beeinflussen. Siehe das folgende Beispiel:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

Hier wird eine Tabellenzeile für jeden Array -Eintrag im Bücherarray automatisch erstellt.

Manchmal müssen Sie sich möglicherweise eher auf den Array -Eintrag selbst beziehen und nicht nur eine seiner Eigenschaften. In diesem Fall können Sie die pseudovierbaren $ -Daten verwenden. Es bedeutet "das aktuelle Element", wann wird innerhalb eines Foreach -Blocks verwendet.

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

In dieser Woche werden alle Tage der Woche aufgeführt, ohne den Code für jeden Element separat zu wiederholen.

In Knockout können Sie so viele Kontrollströmungsbindungen nisten, wie Sie möchten. Und wenn Sie das tun, ist es oft wünschenswert, die Hierarchie zu erreichen und auf Daten oder Funktionen aus übergeordneten Kontexten zuzugreifen. In solchen Fällen können Sie die folgenden Pseudovariablen verwenden:

$ übertrag - repräsentiert das Datenelement außerhalb des aktuellen Foreach -Blocks

$ Eltern-ist ein Array, das Datenelemente aus allen Außenkontroll-Fluss-Scopes darstellt. $ Eltern [0] ist das gleiche wie $ Parent. $ Eltern [1] repräsentiert den Gegenstand aus dem Großelternkontroll-Flow-Bereich usw.

$ root-repräsentiert das Element aus dem äußere Kontrollflus-Bereich. In der Regel ist dies Ihr Modellobjekt auf der obersten Ebene.

Im folgenden Beispiel verwenden wir das pseudoviable $ Elternteil, um ein Buchelement aus dem Bücherarray ordnungsgemäß zu entfernen:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

In einigen Fällen möchten Sie möglicherweise einen Abschnitt von Markup duplizieren, aber Sie haben kein Containerelement, auf dem Sie eine Bindung einstellen können. Dann können Sie die folgende Syntax verwenden:

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

In diesem Beispiel können Sie keine normale Foreach -Bindung verwenden. Wenn Sie es auf die

einsetzen, werden Sie den Header -Element duplizieren. Wenn Sie einen weiteren Behälter in die
einfügen möchten, können Sie nicht, da nur
• Elemente in
  s zugelassen sind. Die Lösung besteht darin, die Containerless-Control-Flow-Syntax zu verwenden, wobei die und Kommentare ein „virtuelles Element“ definieren Dieses virtuelle Element, als hätten Sie ein echtes Containerelement. Diese Art von Syntax gilt auch für wenn und mit Bindungen.

  Die IF -Bindung führt dazu, dass in Ihrem Dokument ein Markup -Abschnitt angezeigt wird, nur wenn ein angegebener Ausdruck auf True bewertet wird. Anschließend ist das enthaltene Markup im Dokument vorhanden, und alle daraufhin-Datenbindungsattribute werden angewendet. Wenn Ihr Ausdruck dagegen auf False bewertet wird, wird das enthaltene Markup aus Ihrem Dokument entfernt, ohne zuerst Bindungen darauf anzuwenden.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  Die mit Bindung erzeugt einen neuen Bindungskontext, so dass Nachkommenselemente im Kontext eines angegebenen Objekts gebunden sind. Das Objekt, das Sie als Kontext für die Bindung von Nachkommenselementen verwenden möchten. Wenn der Ausdruck, den Sie angeben, null oder undefiniert, werden Nachkommenselemente überhaupt nicht gebunden, sondern stattdessen aus dem Dokument entfernt. Das mit Bindung ändert den Datenkontext in das von Ihnen angegebene Objekt. Dies ist besonders nützlich, wenn Sie sich mit Objektdiagrammen mit mehreren Eltern/Kindern Beziehungen befassen.

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  templating

  Die Template -Bindung populiert das zugehörige DOM -Element mit den Ergebnissen der Rendern einer Vorlage. Vorlagen sind eine einfache und bequeme Möglichkeit, ausgefeilte UI -Strukturen - möglicherweise mit wiederholenden oder verschachtelten Blöcken - als Funktion Ihrer Ansichtsmodelldaten aufzubauen. Es gibt zwei Hauptmethoden, um Vorlagen zu verwenden. Der erste, einheimische Templating ist der Mechanismus, der nach, wenn, mit und anderen Kontrollströmungsbindungen. Innen erfassen diese Kontrollstrombindungen das in Ihrem Element enthaltene HTML-Markup und verwenden es als Vorlage, um ein beliebiges Datenelement zu rendern. Diese Funktion ist in Knockout eingebaut und erfordert keine externe Bibliothek. Sie können das grundlegende Schema zum Erstellen einer Vorlage hier sehen:

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  Im folgenden Beispiel können Sie sehen, wie Sie es in Aktion verwenden:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Hier müssen wir eine ID entsprechen, die dem Vorlagennamen entspricht, um die Vorlage an den Rest unseres Markups zu binden. In diesem Fall handelt es sich um "Buch-Template".

  Anstatt die oben beschriebene kurze Syntax zu verwenden, können wir mehr Parameter an die Vorlagenbindung übergeben, was uns eine genauere Kontrolle über die endgültige Ausgabe gibt.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Hier ist der Name die ID des Elements, das die Vorlage enthält, die Sie rendern möchten. Die Daten sind ein Objekt, das als Daten für die Vorlage zur Rendite der Vorlage zur Verfügung gestellt werden kann. und der Nachsrender ist eine Rückruffunktion, die gegen die gerenderten DOM -Elemente aufgerufen werden soll.

  Das folgende Beispiel ist ein Äquivalent zu einer für die Bindung von Foreach. Hier wird für Each als Parameter an die Vorlagenbindung übergeben.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  Sie können genau das gleiche Ergebnis erzielen, indem Sie eine anonyme Vorlage direkt in das Element einbetten, zu dem Sie für die Bindung von Bindung verwenden:

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Die zweite Möglichkeit, Vorlagen zu verwenden, besteht darin, Knockout mit einer Templat-Engine von Drittanbietern zu verbinden. Knockout übergibt Ihre Modellwerte an die externe Template -Engine und injizieren Sie die resultierende Markup -Zeichenfolge in Ihr Dokument. Beispiele, die die jQuery.tmpl und unterstrichen Vorlagenmotoren verwenden.

  erweitern Observables
  Knockout Observables liefern die grundlegenden Funktionen, die erforderlich sind, um Lese-/Schreibwerte zu unterstützen und Abonnenten zu benachrichtigen, wenn sich dieser Wert ändert. In einigen Fällen möchten Sie jedoch möglicherweise zusätzliche Funktionen zu einem beobachtbaren hinzufügen, z. B. zusätzliche Eigenschaften zum Beobachtbaren hinzuzufügen. Knockout -Erweiterungen bieten eine einfache und flexible Möglichkeit, genau das zu tun.
  Erstellen eines Extender beinhaltet das Hinzufügen einer Funktion zum Ko.Ettenders -Objekt. Die Funktion nimmt das Beobachtbare selbst als erstes Argument und alle Optionen im zweiten Argument auf. Es kann dann entweder das Beobachtbare zurückgeben oder etwas Neues wie ein berechnete Beobachtbare zurückgeben, das das ursprüngliche Beobachtbare in irgendeiner Weise verwendet.
  Jetzt erstellen wir einen beobachtbaren Extender, der die Möglichkeit ergibt, eine Hinweisnachricht anzuzeigen.

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  benutzerdefinierte Bindungen

  Die integrierten Bindungen von

  Knockout ermöglichen es Ihnen, die meisten Bindungsszenarien zu bewältigen. Wenn Sie jedoch auf ein spezielles Bindungsszenario stoßen, das nicht abgedeckt ist, können Sie mit Knockout benutzerdefinierte Bindungen erstellen, die Ihnen viel Flexibilität für die Einkapselung von ausgefeiltem Verhalten in einer Einfach zu resesionsübergreifender Weg. Sie können beispielsweise interaktive Komponenten wie Gitter, Tabsets usw. in Form von benutzerdefinierten Bindungen erstellen.
  Knockout -Bindungen bestehen aus zwei Methoden: Init und Update. Das Erstellen einer Bindung ist so einfach wie das Erstellen eines Objekts mit diesen beiden Methoden und das Registrieren dieses Objekts mit Knockout mit Ko.BindingHandlern, wie unten gezeigt.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Die Init -Funktion wird nur das erste Mal ausgeführt, dass die Bindung für dieses Element bewertet wird. Dies wird normalerweise verwendet, um einmalige Initialisierungscode auszuführen oder Ereignishandler zu verabschieden, mit denen Sie Ihr Ansichtsmodell basierend auf einem Ereignis in Ihrer Benutzeroberfläche aktualisieren können.

  Die Aktualisierungsfunktion bietet eine Möglichkeit, zu reagieren, wenn zugehörige Observablen geändert werden. In der Regel wird dies verwendet, um Ihre Benutzeroberfläche basierend auf Änderungen Ihres Ansichtsmodells zu aktualisieren.

  Die Init- und Update -Funktionen werden vier Parameter geliefert. Im Allgemeinen möchten Sie sich auf das Element und die ValueAccessor -Parameter konzentrieren, da sie die Standardmethode sind, um Ihr Ansichtsmodell mit Ihrer Benutzeroberfläche zu verknüpfen. Sie müssen eigentlich nicht sowohl Init- als auch Callbacks aktualisieren - Sie können einfach das eine oder andere bereitstellen, wenn dies alles ist, was Sie brauchen.

  Der Parameter Element gibt Ihnen einen direkten Zugriff auf das DOM -Element, das die Bindung enthält.

  Der Parameter von ValueAccessor ist eine Funktion, die Ihnen Zugriff auf das gibt, was an die Bindung übergeben wurde. Wenn Sie ein Observable bestanden haben, ist das Ergebnis dieser Funktion so beobachtbar (nicht der Wert davon). Wenn Sie einen Ausdruck in der Bindung verwendet haben, ist das Ergebnis des ValuaAccessors das Ergebnis des Ausdrucks.

  Der Parameter AllBindingsAccessor bietet Ihnen Zugriff auf alle anderen Bindungen, die im selben Datenbindungsattribut aufgeführt wurden. Dies wird im Allgemeinen verwendet, um auf andere Bindungen zuzugreifen, die mit dieser Bindung interagieren. Diese Bindungen sind wahrscheinlich keinen Code zugeordnet und sind nur eine Möglichkeit, zusätzliche Optionen an die Bindung zu übergeben, es sei denn, Sie übergeben ein Objekt mit mehreren Eigenschaften in Ihre Hauptbindung. Zum Beispiel sind OptionsValue, OptionStext und OptionsCaption Bindungen, die nur zum Übergeben von Optionen an die Optionenbindung verwendet werden.

  Der Parameter ViewModel bietet Zugriff auf Ihr Gesamtansichtsmodell für Bindungen außerhalb von Vorlagen. Innerhalb einer Vorlage wird dies auf die Daten eingestellt, die an die Vorlage gebunden sind. Wenn beispielsweise die Option "foreach" der Vorlagenbindung verwendet wird, wird der Parameter ViewModel auf das aktuelle Array -Mitglied eingestellt, das über die Vorlage gesendet wird. Die meiste Zeit gibt Ihnen der ValuaCcessor die gewünschten Daten an, aber der Parameter ViewModel ist besonders nützlich, wenn Sie ein Objekt benötigen, um Funktionen aufzurufen/anwenden.

  Im folgenden Beispiel werden wir eine benutzerdefinierte Bindung erstellen, die eine textarea im Fokus skaliert.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  In der Init -Funktion erklären wir zunächst, dass, wenn Element im Fokus steht, sein Wert auf true und umgekehrt festgelegt wird. In der Aktualisierungsfunktion verwenden wir dann den Parameter AllbindingAccessor, um unserem Bindungs ​​-Scale -Up und Scaledown zusätzliche Optionen hinzuzufügen. Wir verwenden den Ko.utils.unwrapObservable, um den Wert der aktuellen Bindung zu erhalten und zu prüfen, ob er auf true eingestellt ist. Wenn ja, ist das DOM -Element verkleinert, sonst wird es skaliert.

  Sehen wir uns endlich ein Beispiel an, das die Hinweise Observable Extender und ScaleonFocus Custom Bindung kombiniert:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Sie können die Hinweise beobachtbar und scaleOnfocus -Bindung in eine separate Datei platzieren und dann in die Hauptdatei einbeziehen. Dies macht den Code modular und ermöglicht es Ihnen, ihn wiederzuwenden, wann immer Sie möchten.

  Das ist es, Leute! Ich hoffe, Sie haben diese Serie genossen. Jetzt haben Sie alle notwendigen Wissen, um zu beginnen und weiter zu lernen und mit Knockout zu experimentieren. Für umfassendere Beispiele und Tutorials können Sie zur Knockout -Site gehen, die ich Ihnen vorschlagen kann.

  häufig gestellte Fragen zu Knockoutjs

  Was ist der Zweck von Ko.utils.UnwrapOBservable in KnockoutJs? Diese Funktion ist besonders nützlich, wenn Sie sich nicht sicher sind, ob Sie mit einem beobachtbaren oder nicht beobachtbaren zu tun haben. Sie können beide Fälle verarbeiten, ohne für jeden separaten Code schreiben zu müssen. Diese Funktion ist Teil der Dienstprogrammfunktionen von KnockoutJS, die zusätzliche Funktionen für die Arbeit mit Observablen erleichtern. Eine Reihe von Elementen zu einem Abschnitt Ihres HTML. Es repliziert das zugehörige DOM -Element und seine Nachkommen für jedes Element im Array und erstellt eine Schleife. Dies ist besonders nützlich, wenn Sie eine Liste von Elementen in Ihrer Benutzeroberfläche anzeigen möchten. Die foreach -Bindung liefert auch einen Kontext für jede Iteration, sodass Sie mit dem Schlüsselwort $ data auf das aktuelle Element zugreifen können. Ein Dienstprogramm, mit dem Sie Ihre JSON -Objekte in beobachtbare Objekte umwandeln können. Dies ist besonders nützlich, wenn Sie mit Daten von einem Server arbeiten. Mit dem Mapping -Plugin können Sie Ihre Daten einfach auf Ihr Ansichtsmodell zuordnen und bietet Optionen zum Anpassen des Zuordnungsprozesses.

  Wie kann ich mit Sammlungen in KnockoutJs arbeiten? In KnockoutJs wird mit Hilfe von beobachtbaren Arrays leicht gemacht. Beobachtbare Arrays sind spezielle Arten von Observablen, die eine Reihe von Werten enthalten. Sie bieten Funktionen, um das Array wie Push, Pop, Verschiebung, Unschärfe, Umkehr, Sortier und Spleiß zu manipulieren. Beobachtbare Arrays benachrichtigen auch Abonnenten, wenn Elemente hinzugefügt oder entfernt werden, so Wenn Sie in KnockoutJs ein Problem gefunden haben, können Sie es auf der KnockoutJS -Github -Seite melden. Vor der Meldung eines Problems ist es eine gute Idee, zu überprüfen, ob das Problem bereits von jemand anderem gemeldet wurde. Wenn dies nicht der Fall ist, können Sie ein neues Problem erstellen und so viele Details wie möglich angeben, um dem Knockoutjs -Team das Problem zu verstehen und zu lösen.

  Wie kann ich berechnete Observablen in KnockoutJs verwenden? Berechnete Observablen sind nützlich, wenn Sie Observables in irgendeiner Weise kombinieren oder manipulieren möchten. Um ein berechnetes Observable zu erstellen, können Sie die Ko.computed -Funktion verwenden.

  Wie kann ich Ereignisse in KnockoutJs verarbeiten? Fokus unter anderem. Mit diesen Bindungen können Sie eine JavaScript -Funktion angeben, die ausgeführt werden soll, wenn das zugehörige Ereignis auftritt. Die Funktion kann Teil Ihres Ansichtsmodells oder einer eigenständigen Funktion sein.

  Wie kann ich benutzerdefinierte Bindungen in KnockoutJs verwenden? verwendet genau wie die eingebauten Bindungen. Dies ist besonders nützlich, wenn Sie wiederverwendbare Funktionen der Funktionalität erstellen möchten. Um eine benutzerdefinierte Bindung zu erstellen, können Sie das Ko.BindingingHandlers -Objekt verwenden. Sie können mit Console.log Werte ausdrucken oder Haltepunkte verwenden, um die Ausführung zu pausieren und den aktuellen Status Ihrer Anwendung zu überprüfen. KnockoutJs liefert auch die Ko.tojson -Funktion, mit der Ihr Ansichtsmodell für eine einfache Inspektion in eine JSON -Zeichenfolge umgewandelt werden kann. mit JavaScript -Test -Frameworks wie Jasmine oder Mokka ausgeführt. Mit diesen Frameworks können Sie Unit -Tests für Ihre Ansichtsmodelle schreiben und sicherstellen, dass sie sich wie erwartet verhalten. Beim Testen von KnockoutJS -Anwendungen ist es eine gute Idee, Ihre Ansichtsmodelle so weit wie möglich vom DOM zu trennen, um Tests zu vereinfachen.

Das obige ist der detaillierte Inhalt vonAnfängerleitfaden zu Knockoutjs: Teil 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!