Einführung 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

• Microsoft: MVVM
• KnockoutJs: Einführung
• KnockoutJs: Installation

MVVM-Muster

Die MVVM-Architektur (Model-View-ViewModel) ist ein Software-Designmuster, das häufig in Benutzeroberflächenanwendungen verwendet wird. MVVM ist besonders nützlich in Anwendungen mit komplexen und interaktiven Benutzeroberflächen, da es die Geschäftslogik klar vom Schnittstellenverhalten trennt. Dies erleichtert die Wartung, Testbarkeit und Skalierbarkeit des Codes.

Wenn der Benutzer mit der Ansicht interagiert, erfasst das ViewModel diese Aktionen und aktualisiert die entsprechenden Daten im Modell. Wenn das Model aktualisiert wird, empfängt das ViewModel diese Änderungen und aktualisiert automatisch die View, wodurch die Änderungen in der Benutzeroberfläche widergespiegelt werden. Das ViewModel kann auch bestimmte Aktionen ausführen, z. B. das Senden von Anfragen an den Server zum Abrufen oder Senden von Daten.

Modell: Das Modell stellt die Datenschicht der Anwendung dar. Es verwaltet Geschäftslogik, Validierungsregeln sowie Datenspeicherung und -abruf. Das Modell besteht im Allgemeinen aus Datenobjekten, die für die Anwendungsdomäne spezifische Entitäten und Funktionalitäten darstellen.

Ansicht: Die Ansicht ist die Präsentationsschicht der Anwendung, die für die Anzeige der Modell-Daten und die Interaktion mit dem Benutzer verantwortlich ist. Es stellt die grafische Schnittstelle dar, mit der der Benutzer interagiert, um Daten zu visualisieren und zu bearbeiten. In der MVVM-Architektur wird die Ansicht so weit wie möglich von der Geschäftslogik entkoppelt, sodass sie einfach zu aktualisieren und zu ersetzen ist.

ViewModel: Das ViewModel ist der Kernbestandteil des MVVM-Musters. Es fungiert als Vermittler zwischen der Ansicht und dem Modell und führt die Kommunikation und bidirektionale Datenbindung zwischen ihnen durch. Das ViewModel enthält die Präsentationslogik, die die Daten aus dem Model in eine Form umwandelt, die für die Anzeige im View geeignet ist. Darüber hinaus verwaltet das ViewModel Benutzerereignisse und -antworten und interagiert bei Bedarf mit dem Model.

KnockoutJs

Knockout.js ist eine Open-Source-JavaScript-Bibliothek, mit der Sie dynamische und reaktive Benutzeroberflächen erstellen können. Es ist besonders nützlich für die Entwicklung von Webanwendungen mit komplexer und interaktiver Benutzeroberfläche. KnockoutJs basiert auf dem MVVM-Entwurfsmuster (Model-View-ViewModel), das die Geschäftslogik (Model) von der Präsentation (View) durch ein Zwischenprodukt trennt Ebene namens ViewModel. Es ist unabhängig von jeder anderen Struktur.

KnockoutJs wurde am 5. Juli 2010 von Steve Sanderson, einem Microsoft-Mitarbeiter, als Open-Source-Projekt entwickelt und wird gepflegt.

KnockoutJs unterstützt alle gängigen Browser – IE 6, Firefox 3.5, Chrome, Opera, Safari (Desktop/mobil). Das data-bind-Attribut stammt nicht ursprünglich aus HTML, obwohl es ein akzeptables Attribut ist (es ist streng kompatibel mit HTML 5 und verursacht keine Probleme mit HTML 4, obwohl ein Validator anzeigt, dass es sich um ein nicht erkanntes Attribut handelt). Da der Browser jedoch nicht weiß, was das bedeutet, müssen Sie KnockoutJs aktivieren, damit es wirksam wird.

Wenn Sie KnockoutJs verwenden, ist Ihre view-Ebene einfach Ihr HTML-Dokument mit deklarativen Bindungen, um es mit der view-model-Ebene zu verknüpfen. Alternativ können Sie Modelle verwenden, die HTML mithilfe von Daten aus einem Modell in der Ebene view-model.

generieren

Platzieren Sie einfach den script-Block unten in einem HTML-Dokument oder platzieren Sie ihn oben und packen Sie den Inhalt in einen DOM-fähigen Handler wie die $-Funktion von jQuery.

ko.applyBindings(myViewModel): ist eine Methode, die verwendet wird, um Datenbindung in KnockoutJs anzuwenden und ein ViewModel (oder Model) an den Schnittstellenbenutzer zu binden (Ansicht). Es verbindet das ViewModel mit HTML-Elementen im DOM und ermöglicht so, dass Daten aus dem ViewModel automatisch in der Benutzeroberfläche wiedergegeben werden und umgekehrt. Beim Aufrufen dieser Methode durchläuft KnockoutJs das DOM auf der Suche nach Elementen, die über die KnockoutJs-Datenbindung-Anweisungen verfügen, und erstellt die Verknüpfungen zwischen diesen Elementen und den in den Anweisungen angegebenen ViewModel-Eigenschaften.

Optional können Sie einen zweiten Parameter übergeben, um zu definieren, in welchem ​​Teil des Dokuments Sie nach Datenbindungsattributen suchen möchten. Zum Beispiel ko.applyBindings(myViewModel, document.getElementById('someElementId')). Dadurch wird die Aktivierung auf das Element mit der ID someElementId und seine Nachkommen beschränkt. Dies ist nützlich, wenn Sie mehrere Anzeigemodelle haben und jedes einem anderen Bereich der Seite zuordnen möchten.

Installation

Referenzieren Sie einfach die JavaScript-Datei mit einem

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse