Share
Backbone wird als Framework für die Entwicklung von Webanwendungen immer beliebter. Zusammen mit dieser Popularität gibt es unzählige Erweiterungen und Plugins, um die Leistungsfähigkeit des Frameworks zu verbessern und Löcher zu füllen, die von anderen Benutzern nachgefüllt werden mussten. Schauen wir uns einige der besten Möglichkeiten an.
Diese von Derick Bailey entwickelte Erweiterung ist recht groß und ist mein persönlicher Favorit. Anstatt ein oder zwei Features zu Backbone hinzuzufügen, beschloss Derick, alle größten Löcher zu füllen, die er für existent hielt. Was er dazu in der Readme-Datei des GitHub-Projekts sagt.
"Backbone.Marionette ist eine zusammengesetzte Anwendungsbibliothek für Backbone.js, die darauf abzielt, die Erstellung umfangreicher JavaScript-Anwendungen zu vereinfachen. Es ist eine Sammlung allgemeiner Entwurfs- und Implementierungsmuster, die in den Anwendungen gefunden werden, die ich (Derick Bailey) mit Backbone erstellt habe und enthält verschiedene Stücke, die von Composite-Anwendungsarchitekturen inspiriert wurden, wie beispielsweise das Prism-Framework von Microsoft.
Schauen wir uns genauer an, was Marionette uns bietet:
Ich habe nur die Oberfläche dessen gekratzt, was Marionette kann. Ich empfehle auf jeden Fall, zu GitHub zu gehen und deren Dokumentation im Wiki zu lesen.
Darüber hinaus deckt Andrew Burgess Marionette in seinem Kurs "Tuts + Premium Advanced Backbone Patterns and Techniques" ab.
Backbone.Validation füllt eine kleine Nische eines Problems aus: Modellvalidierung. Es gibt mehrere Validierungserweiterungen für Backbone, aber diese scheint der Community den meisten Respekt zu verschaffen.
Anstatt tatsächlich schreiben zu müssen bestätigen Methode für Ihre Modelle können Sie eine erstellen Validierung Eine Eigenschaft für Ihre Modelle. Hierbei handelt es sich um ein Objekt, das jedes der zu validierenden Attribute und eine Liste von Validierungsregeln für jedes dieser Attribute angibt. Sie können auch Fehlernachrichten für jedes Attribut angeben und benutzerdefinierte Funktionen zur Überprüfung eines einzelnen Attributs übergeben. Unten sehen Sie ein Beispiel, das von einem der Beispiele auf der Website abgeändert wurde.
var SomeModel = Backbone.Model.extend (validation: name: erforderlich: wahr, 'address.street': erforderlich: true, 'address.zip'): Länge: 4, Alter: Bereich: [1, 80], E-Mail: Muster: 'E-Mail', // eigene Fehlermeldung angeben msg: "Bitte geben Sie eine gültige E-Mail-Adresse ein" // Benutzerdefinierte Überprüfungsfunktion für 'someAttribute' someAttribute: function (value) if (value! == 'somevalue') gibt 'Fehlermeldung' zurück;);
Es gibt unzählige eingebaute Validatoren und Muster, mit denen Sie überprüfen können, und es gibt sogar eine Möglichkeit, die Liste mit Ihren eigenen globalen Validatoren zu erweitern. Dieses Backbone-Plugin macht die Validierung zwar nicht gerade spaßig, beseitigt aber sicherlich alle Ausreden, um die Validierung nicht hinzuzufügen. Bitte besuchen Sie die Website für weitere Beispiele und eine ausführlichere Erklärung für die Verwendung dieses wunderbaren Tools.
Bei Backbone.LayoutManager geht es darum, die Ansichten von Backbone zu verbessern. Wie Backbone.Marionette führt es Bereinigungscode ein, um Speicherverluste zu vermeiden, übernimmt die gesamte Boilerplate und sorgt nur für Konfiguration und anwendungsspezifischen Code. Im Gegensatz zu Marionette konzentriert sich LayoutManager speziell auf Ansichten.
Da LayoutManager sich ausschließlich auf Ansichten konzentriert, kann er mehr für die Ansichten als Marionette tun. Zum Beispiel ist LayoutManager in der Lage, asynchrones Rendering durchzuführen, falls Sie Ihre Vorlagen dynamisch aus externen Dateien laden möchten.
LayoutManager kann auch Subviews behandeln, jedoch auf eine ganz andere Art und Weise als Marionette. In beiden Fällen handelt es sich jedoch im Wesentlichen um Konfigurationen, was die Dinge extrem einfach macht und 90% der Arbeit überflüssig macht, die Sie hätten erledigen müssen, wenn Sie dies alles alleine implementieren wollten. Unten finden Sie ein einfaches Beispiel zum Hinzufügen von drei Unteransichten zu einer Ansicht:
Backbone.Layout.extend (views: "header": new HeaderView (), "section": new ContentView (), "footer": new FooterView ());
Lesen Sie wie üblich die GitHub-Seite und die Dokumentation, um mehr zu erfahren.
Backbone.ModelBinder erstellt Verknüpfungen zwischen den Daten in Ihren Modellen und der von Ihren Ansichten angezeigten Markierung. Sie können dies bereits tun, indem Sie an das Änderungsereignis Ihrer Modelle binden und die Ansicht erneut rendern. ModelBinder ist jedoch effizienter und einfacher zu verwenden.
Sehen Sie sich den Code unten an:
Accentsconagua
var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Alte Backbone.js-Methode) this.model.on ('change', this.render, this); / / oder das neue Backbone 0.9.10+ weg this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ()));); Das Problem bei diesem Ansatz ist, dass bei jeder Änderung eines einzelnen Attributs die gesamte Ansicht erneut gerendert werden muss. Bei jedem Rendern müssen wir das Modell auch in konvertieren JSON. Wenn die Bindung schließlich bidirektional sein soll (wenn das Modell aktualisiert wird, auch das DOM und umgekehrt), müssen wir der Ansicht noch mehr Logik hinzufügen.
In diesem Beispiel wurden Underscores verwendet Vorlage Funktion. Nehmen wir an, die Vorlage, die wir übergeben haben, sieht so aus:
Verwenden der Tags <%= und %> mach das Vorlage Funktion ersetzen diese Bereiche durch die Vorname und Nachname Eigenschaften, die in der von dem Modell gesendeten JSON vorhanden sind. Wir nehmen an, dass das Modell auch beide Attribute hat.
Mit ModelBinder können wir stattdessen diese Vorlagen-Tags entfernen und normal senden HTML. ModelBinder sieht den Wert von Name Attribut auf die Eingang Tag, und weist dem Modell automatisch den Wert des Modells für diese Eigenschaft zu Wert Attribut des Tags. Zum Beispiel der erste Eingang's Name ist auf "firstName" gesetzt. Wenn wir ModelBinder verwenden, wird dies erkannt und dann festgelegt Eingang's Wert zu den Modellen Vorname Eigentum.
Nachfolgend sehen Sie, wie unser vorheriges Beispiel aussehen würde, nachdem Sie zu ModelBinder gewechselt haben. Beachten Sie auch, dass die Bindung bidirektional ist Eingang Tags werden aktualisiert, das Modell wird für uns automatisch aktualisiert.
HTML-Vorlage:
JavaScript-Ansicht:
var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // Hier ist keine weitere Bindung erforderlich), render: function () // Das HTML-Recht in dieser. $ el.html (this.) werfen .template); // Verwenden Sie ModelBinder zum Binden des Modells und sehen Sie modelBinder.bind (this.model, this.el);;
Jetzt haben wir saubere HTML-Vorlagen und benötigen nur eine einzige Codezeile, um den HTML-Code der Ansicht und die Modelle miteinander zu verbinden modelBinder.bind. modelBinder.bind nimmt zwei erforderliche Argumente und ein optionales Argument an. Das erste Argument ist das Modell mit den Daten, die an das DOM gebunden werden. Der zweite ist der DOM-Knoten, der rekursiv durchlaufen wird und nach Bindungen sucht, die erstellt werden sollen. Das letzte Argument ist a Bindung Objekt, das erweiterte Regeln für die Ausführung von Bindungen festlegt, wenn Sie die Standardnutzung nicht mögen.
ModelBinder kann mehr als nur verwendet werden Eingang Stichworte. Es funktioniert für jedes Element. Wenn das Element eine Art Formulareingabe ist, z Eingang, wählen, oder Textbereich, Die Werte dieses Elements werden entsprechend aktualisiert. Wenn Sie an ein Element binden, z div oder Spanne, Dadurch werden die Daten des Modells zwischen den öffnenden und schließenden Tags dieses Elements platziert (z. [Daten gehen hier]).
Hinter Backbone.ModelBinder steckt viel mehr Leistung als hier gezeigt. Lesen Sie daher die Dokumentation im GitHub-Repository, um alles darüber zu erfahren.
Das fasst die Dinge zusammen. Ich habe nur eine Handvoll Erweiterungen und Plugins behandelt, aber diese sind meiner Meinung nach am nützlichsten.
Die Backbone-Landschaft verändert sich ständig. Wenn Sie eine umfassende Liste der verschiedenen verfügbaren Backbone-Erweiterungen anzeigen möchten, besuchen Sie diese Wiki-Seite, die vom Backbone-Team regelmäßig aktualisiert wird.
