Das Schreiben komplexer Anwendungen ist mit der Zunahme der Komplexität des Codes verbunden, obwohl dies normalerweise kein Axiom oder eine etablierte Regel ist. Tatsächlich wäre es am besten, wenn unsere Anwendung aufgrund der Vereinigung vieler kleiner Anwendungen komplex wäre. da eine einfache kleine App das Leben des Entwicklers einfacher machen würde.
Im Falle des Knockout.js etwas ähnliches passiert mit Bindungen, wo es Verhaltensweisen gibt, die wir mithilfe der Bindungen Dies würde jedoch am Ende eine hohe Komplexität erzeugen, da uns dies etwas an Flexibilität raubt, damit sagen wir nicht, dass die Bindungen Basics sind schlecht, es gibt einfach Zeiten, in denen sie bei uns nicht richtig funktionieren würden.
Erweiterte BindungenDeshalb müssen wir die erweiterte Bindungen, hier können wir selbst bauen Bindungen mit Verhaltensweisen, die wir direkt definieren, was uns ein gewisses Maß an Komplexität im Code erspart und die Lesbarkeit erhöht. Der einzige Nachteil des Aufrufs besteht darin, dass wir diese Verhaltensweisen fast von Grund auf neu erstellen würden, wodurch die Wiederverwendung des Codes null wird.
Binden Sie zwei oder mehr ViewModels
Es gibt Zeiten, in denen unsere Modelle anzeigen sollte so einfach wie möglich bleiben, oder vielleicht müssen wir a Modell anzeigen die auf jeder Seite unserer Anwendung geteilt wird, in jedem Fall die Anforderung, mehrere verwenden zu können Modelle anzeigen gleichzeitig bleibt es.
Wie funktioniert es?Bevor Sie sich über dieses Problem Gedanken machen, ist es gut zu wissen, dass dies nicht verrückt und nicht unmöglich ist. Tatsächlich ist es eine sehr gängige Praxis, die Einfachheit und Lesbarkeit unseres Codes in der Anwendung beizubehalten. Dazu müssen wir nur noch einen zweiten Parameter an die Methode übergeben ko.applyBindings die uns helfen, dieses Ziel zu erreichen, indem wir die Bindung zum HTML das es enthält, auf diese Weise können wir alle Modell anzeigen die wir ohne Unannehmlichkeiten brauchen
Sehen wir uns ein kleines Beispiel an, wo wir dies ermöglichen werden, zuerst werden wir ein bauen HTML wo wir zwei Elemente haben werden jeder mit einem Namen von Modell anzeigen anders, dies gibt uns die Grundlage für das, was wir erreichen möchten, und in jedem Input werden wir einfach ein Datenbindung vom Typ Text.
Bereits im Teil von JavaScript wir werden unsere definieren Modell anzeigen general wo wir ein Attribut namens . zurückgeben Name und zum Zeitpunkt der Instanz werden wir eine AnsichtModell1 und ein viewModel2 das werden Instanzen der Modell anzeigen Allgemeines, das wir mit verschiedenen Namen erstellen, schließlich durch die Anwendung der ko.applyBinding Wir werden sagen, welcher Block HTML Jeder muss dazugehören und damit erreichen wir das Ziel dieses Beispiels.
Sehen wir uns dann im folgenden Code an, wie wir alles ausdrücken, was wir zuvor erklärt haben:
Erweiterte DatenbindungSehen wir uns im folgenden Bild an, wie unser Beispiel aussieht, wenn wir es im Browser ausführen:
VERGRÖSSERN
Wir sehen im Bild, dass unsere beiden Modelle anzeigen effektiv werden sie in unserem HTML angewendet, wobei jeder in dem Element enthalten ist, das wir als zweiten Parameter an die Methode übergeben ko.applyBindungen () Dies gibt uns die Idee, wie wir es in unseren Anwendungen vollständiger anwenden können.
Bindungen und TinyMCE
Für dieses Beispiel werden wir eine an die reale Welt angepasste Funktionalität erstellen, wir werden ein Bindung Erweitert, um uns bei der Einbindung des Editors zu helfen TinyMCE in unserer HTML, was dieser Editor macht, ist eine Schnittstelle zu erstellen WYSIWYG, also ein Rich-Text-Editor. Die Hauptschwierigkeit dieser Implementierung besteht darin, dass wir unsere eigenen erstellen müssen Bindung, was uns Kopfschmerzen bereiten kann, wenn wir keinen geeigneten Führer haben, den wir jetzt haben werden.
AnforderungenUm dieses Beispiel auszuführen, müssen wir in diesem Fall einige externe Ressourcen herunterladen jQuery in der neuesten Version, zusätzlich zum Herunterladen der TinyMCE und in unser Projekt einbinden, um die Ressourcen zu erhalten, müssen wir einfach eine schnelle Suche in Google deshalb werden wir bei diesem Punkt nicht lange verweilen. Das andere, was wir brauchen, ist eine neue Datei namens . zu erstellen kobinding.js Hier schreiben wir den erforderlichen Code, damit unsere Lösung ordnungsgemäß funktioniert. Sobald wir alle unsere Ressourcen heruntergeladen haben und sich in einem Pfad befinden, auf den wir von unserer Anwendung aus zugreifen können, können wir unseren Code schreiben.
Was die Anwendung tun wird, ist uns eine Vorschau von dem, was wir schreiben, dafür erstellen wir ein Formular, in dem wir unser Textfeld platzieren, das at . haben wird TinyMCE, eine Reset-Taste, um alles in den Ausgangszustand zurückzusetzen und schließlich a wo wir den Text erhalten, den wir schreiben.
Schließlich werden wir alle unsere Ressourcen einschließen, einschließlich der neuen Datei kobinding.js und wir bauen den notwendigen Code für unsere Modell anzeigen mit einem beobachtbar Damit können wir die Änderungen in unserem Textfeld erkennen. Sehen wir uns an, wie unser Code aussieht:
Erweiterte Datenbindung TinyMCE Inhalt zurücksetzenWenn wir uns den Code ansehen und die vorherigen Tutorials befolgt haben, werden wir feststellen, dass es nichts gibt, was uns Zweifel aufkommen lassen könnte. Wenn wir dies jedoch in unserem Browser ausführen, funktioniert es nicht so, wie wir es erklärt haben, und das liegt daran, dass wir brauche Bindung benutzerdefinierte in unserer neuen Datei.Vorschau
Was dieser neue Code bewirkt, ist eine Verbindung zwischen dem Verhalten der TinyMCE und unsere Modell anzeigen, dafür erstellen wir zwei Funktionen oder Methoden namens drin Ja aktualisieren, für die Methode drin wie der Name schon sagt, wenn wir unsere Komponente initialisieren, setzen wir hier die Bindung des Textbereichs mit TinyMCE damit wir das Observable anwenden können, definieren wir zusätzlich das Ereignis Veränderung Dabei ändern sich Status und Inhalt unseres Textfelds, sodass wir den Inhalt in Echtzeit aktualisieren können.
Die andere Methode oder Funktion ist aktualisieren, dies wird bei jeder Änderung des verlinkten Elements aktiviert, z. Schauen wir uns dann den endgültigen Code für unsere an kobinding.js:
ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. getContent ());}); }}; $ (Element) .text (valueAccessor () ()); setTimeout (Funktion () {$ (Element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal'] addDisposeCallback (Element, Funktion () {$ (Element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == Wert) {tinymce.setContent (Wert); }}}};Wenn wir unseren Browser erneut ausführen, sehen wir, dass zum Zeitpunkt des Schreibens alles so funktioniert, wie es sollte, und wenn wir den Fokus ändern, sehen wir, dass wir in unserem Vorschaubereich den Inhalt so haben, wie er aussehen sollte:
VERGRÖSSERN
Damit konnten wir eine erweiterte Bindung und personalisiert, das uns hilft, alles zu verstehen, was wir mit ein wenig Einfallsreichtum erreichen können, und all die Werkzeuge, die es uns gibt Schlagen. Fälle wie der von TinyMCE Sie sind sehr verbreitet, da diese Art von Plug-In bei der Entwicklung von Webanwendungen sehr beliebt ist, sodass wir möglicherweise irgendwann in der Entwicklung unseres Projekts eine ähnliche Lösung anwenden müssen.
Damit haben wir dieses Tutorial abgeschlossen, da wir sehen, dass es nicht notwendig ist, uns auf die Funktionen und vorgefertigten Methoden in . zu beschränken SchlagenNatürlich gibt es Funktionalitäten, die für diesen Wissensstand noch sehr weit fortgeschritten sind, die aber mit Praxis und Forschung erreicht werden können. Das Interessante ist, dass all dies mit ein wenig Lektüre der offiziellen Dokumentation von . erreicht werden kann Schlagen und suchen auch nach Fallbeispielen, die uns helfen, uns zu veranschaulichen und in einen Kontext zu setzen.
