Share
Willkommen zum zweiten Teil der Verwendung von Backbone im WordPress Admin. Im ersten Teil haben wir das "Back-End" unseres Plugins eingerichtet, und im zweiten Teil schließen wir unsere "Client-Side" - oder "Front-End" -Funktionalität ab. Einen Überblick über das, was wir in diesem Tutorial zusammen mit unserer Ordnerstruktur und den Dateien erstellen, finden Sie im ersten Teil.
Innerhalb des src erstellen Sie einen anderen Ordner namens Vorlagen und eine Datei in dieser angerufen metabox.templ.php. Hier setzen wir den für unsere Meta-Box benötigten HTML-Code. Es ist auch eine großartige Gelegenheit, die für unsere Antworten benötigten JSON-Daten auszugeben.
Ihre Ordner und Dateien sollten jetzt so aussehen.
Lassen Sie uns noch einen Blick darauf werfen, was wir schaffen. Sie können sich jede Antwort als eine Modell von Daten und weil wir clientseitige Vorlagen verwenden, um eine Aussicht Diese Ansicht kann für jede Ansicht auf Änderungen innerhalb des Modells reagieren. Auf diese Weise können wir sehr spezifisch sein, wenn Sie Ereignisse an die Benutzeroberfläche binden. Dies führt natürlich zu einem einfacheren Workflow - sobald Sie sich einmal damit auskennen.
In unserem neu erstellt metabox.templ.php, Dies ist die Vorlage, die wir für jedes unserer Modelle verwenden werden. Sie sehen, dass wir im Wesentlichen HTML in ein Skript-Tag einbinden. Wir geben dem Script-Tag das Attribut type = "text / template" damit der Browser es nicht für die Seite rendert. Dieses kleine Stück HTML soll später verwendet werden, um das für jede Ansicht erforderliche Markup zu generieren. Wir werden die integrierten Vorlagenfunktionen von Underscore verwenden, damit die Werte so umschlossen werden werden in unseren Modellen später durch Daten ersetzt.
Immer noch in src / templates / metabox.templ.php - Hier legen wir gerade die Container fest, die mit den Eingaben aus der obigen Vorlage gefüllt werden. Dies geschieht, nachdem Backbone die für das Modell erforderlichen JSON-Daten analysiert hat. Jetzt müssen wir hier nur noch vorgehen.
Geben Sie die Antworten unten ein
Korrekte Antwort:
Das letzte, was im Inneren benötigt wird src / templates / metabox.templ.php Datei, sind die JSON-Daten, die jede Antwort darstellen. Hier erstellen wir ein Objekt im globalen Namespace und weisen dann die Werte zu, die wir mit dem durchgesendet haben $ viewData Array. Ich speichere auch gerne Verweise auf die Container, die wir später verwenden werden, damit ich keine IDs in zwei separaten Dateien habe.
Ok, wenn Sie so weit gekommen sind, haben Sie Ihr Plugin erfolgreich eingerichtet, um die Verwendung von Backbone.js zuzulassen, und Ihre Meta-Box gibt die erforderlichen Markierungs- und JSON-Daten aus. Jetzt ist es an der Zeit, alles zusammen zu bringen und Backbone.js zu verwenden, um unseren clientseitigen Code zu organisieren. Es ist Zeit zu berichten:
Ihre endgültige Verzeichnisstruktur und Dateien sollten so aussehen.
Zuerst packen wir alles, was wir tun, in eine sofort aufgerufene Funktion und übergeben jQuery, damit es mit verwendet werden kann $ unterschreiben, ich zeige diesen Wrapper nicht mehr in Ausschnitten, also stellen Sie sicher, dass Sie alles darunter einfügen.
/ * js / admin.js * / (Funktion ($) / ** Unser Code hier ** / (jQuery));
Als Nächstes müssen wir auf unsere im globalen Namespace gespeicherten Daten zugreifen und ein neues Objekt erstellen, in dem unsere Backbone-Objekte gespeichert werden.
/ * js / admin.js * / var Quiz = Views: ; var wpq = window.wpQuiz;
Das Modell repräsentiert eine einzelne Antwort. In seinem Konstruktor machen wir ein paar Dinge.
Accentsconagua
falsch Ajaxurl Variable, die auf jeder Verwaltungsseite verfügbar ist. Wir hängen auch den Namen unserer Methode an, die die Ajax-Anfrage bearbeitettojson Methode zum Anhängen der aktuellen Post-ID an jedes Modell. Dies könnte serverseitig geschehen, aber ich habe es hier als ein Beispiel eingefügt, wie Sie überschreiben können, was auf dem Server gespeichert ist sehr praktisch, weshalb ich es hier aufgenommen habe) / * js / admin.js * / Quiz.Model = Backbone.Model.extend (Standardwerte: 'correct': false, URL: ajaxurl + '? action = save_answer'), toJSON: function () var attrs = _ .clone (this.attributes); attrs.post_id = wpq.post_id; return attrs;, initialize: function () if (this.get ('answer_id') === wpq.answers.correct) this.set ('richtig', wahr);); Eine Collection ist im Wesentlichen nur ein Wrapper für eine Reihe von Modellen und macht das Arbeiten mit diesen Modellen zum Kinderspiel. In unserem kleinen Beispiel ändern wir nicht die Sammlung, sondern geben nur an, welches Modell verwendet werden soll.
/ * js / admin.js * / Quiz.Collection = Backbone.Collection.extend (Modell: Quiz.Model);
Unsere erste Ansicht kann als Wrapper für die einzelnen Eingabefelder betrachtet werden. Wir müssen in diesem Fall keine Vorlage oder das HTML-Element deklarieren, das Backbone für uns erstellen soll, da wir später, wenn wir diese Ansicht instanziieren, die ID von a übergeben div dass wir in der Meta-Box-Datei erstellt haben. Das Backbone verwendet dieses Element dann einfach als Container. Diese Ansicht nimmt eine Sammlung auf und erstellt für jedes Modell in dieser Sammlung eine neue Eingang Element anhängen und an sich selbst anhängen.
/ * js / admin.js * / Quiz.Views.Inputs = Backbone.View.extend (initialize: function () this.collection.each (this.addInput, this);), addInput: function (Modell, Index ) var input = new Quiz.Views.Input (model: model); this. $ el.append (input.render (). el);;
Diese nächste Ansicht repräsentiert ein einzelnes Modell. Um die möglichen Arten von Dingen aufzuzeigen, die Sie beim Kodieren von JavaScript auf diese Weise machen können, habe ich versucht, einige verschiedene Interaktionstechniken bereitzustellen und zu zeigen, wie Sie mit Backbone auf diese reagieren.
Beachten Sie, dass wir ein 'angeben'Verlinke den Namen'hier mit einer Vorlage. In unserem Fall wird dies die Vorlage, die wir zuvor angesehen haben, packen, sie mithilfe der Daten des Modells analysieren und dann alles in eine p Tag (was uns einen schönen Rand um jeden geben wird).
Beachten Sie auch, wie Ereignisse an Elemente in einer Ansicht gebunden werden. Viel sauberer als ein durchschnittlicher jQuery-Rückruf. Was noch besser ist, ist die Möglichkeit, einen jQuery-Selector wie diesen zu verwenden this. $ ('input') innerhalb unserer Ansichten zu wissen, dass sie automatisch innerhalb der Ansicht liegen. Dies bedeutet, dass jQuery nicht das gesamte DOM betrachtet, wenn versucht wird, einen Selektor abzugleichen.
In dieser Ansicht können wir:
/ * js / admin.js * / Quiz.Views.Input = Backbone.View.extend (tagName: 'p', // Ruft die Vorlage aus der DOM-Vorlage ab: _. template ($ (wpq.inputTempl) .html ()), // Wenn ein Modell gespeichert ist, kehren Sie die Schaltfläche in den deaktivierten Zustand zurück. Initialize: function () var _this = this; this.model.on ('sync', function () _this. $ ('Button) ') .text (' Save ') .attr (' disabled ', true););, // Ereignisse anhängen Ereignisse: ' Tastatureingabe ':' Unschärfe ',' Unschärfe ':' Unschärfe ',' Klicken Sie auf die Schaltfläche ':' save ', // Führen Sie die Funktion save speichern: (e) e.preventDefault (); $ (e.target) .text (' wait '); this.model.save (); // Aktualisieren Sie die Modellattribute mit Daten aus dem Eingabefeld blur: function () var input = this. $ ('Input'). Val (); if (input! == this.model.get ('answer' )) this.model.set ('answer', input); this. $ ('button'). attr ('disabled', false);, // Rendern der einzelnen Eingabe - enthalten einen Index. render: function () this.model.set ('index', this.model.collection.indexOf (this.model) + 1); this. $ el.html (this.template.) (this.model.toJSON ())); kehre das zurück; ); In diesem Auswahlelement kann der Benutzer die richtige Antwort auswählen. Wenn diese Ansicht instantiiert wird, erhält sie dieselbe Sammlung von Modellen wie der Wrapper der Eingabe. Dies wird sich später als nützlich erweisen, da wir in den Eingabefeldern Änderungen am Modell überwachen und die entsprechenden Werte in diesem Auswahlelement automatisch aktualisieren können.
/ * js / admin.js * / Quiz.Views.Select = Backbone.View.extend (initialize: function () this.collection.each (this.addOption, this);, addOption: function (model) var option = new Quiz.Views.Option (model: model); this. $ el.append (option.render (). el););
In unserer Endansicht wird für jedes Modell ein Optionselement erstellt, das an das Auswahlelement oben angehängt wird. Dieses Mal habe ich gezeigt, wie Sie dynamisch Attribute für das Element festlegen können, indem Sie einen Hashwert aus einer Callback-Funktion zurückgeben, die der Attribute-Eigenschaft zugewiesen ist. Beachten Sie auch, dass in der initialisieren() Methode, die wir für das Ändern von Ereignissen auf dem Modell (insbesondere der Antworten Attribut). Dies bedeutet im Grunde nur: jederzeit dieses Modells Antworten Attribut geändert wird, rufen Sie das auf machen() Methode (die in diesem Fall nur den Text aktualisiert). Dieses Konzept des "Abonnierens" oder "Abhörens" von Ereignissen, die innerhalb eines Modells auftreten, macht Backbone.js und die vielen anderen Bibliotheken so mächtig, nützlich und macht es Spaß, damit zu arbeiten.
/ * js / admin.js * / Quiz.Views.Option = Backbone.View.extend (tagName: 'option', // durch die Rückgabe eines Hashes können Attribute dynamisch gesetzt werden. Attribute: function () return 'value') : this.model.get ('answer_id'), 'selected': this.model.get ('correct'), // Achten Sie auf Änderungen an jedem Modell (die in den Eingabefeldern vorkommen, und machen Sie es erneut, wenn es dort ist.) ist eine Änderung initialize: function () this.model.on ('change: answer', this.render, this);, render: function () this. $ el.text (this.model.get (' Antwort ')); zurückgeben;); Wir sind jetzt so nah, alles, was wir tun müssen, ist, eine neue Collection zu instanziieren und die erforderliche JSON zu übergeben, dann beide Wrapper-Ansichten für das select-Element und für die Eingaben. Beachten Sie, dass wir auch das übergeben el Eigentum zu unseren Ansichten. Dies sind Verweise auf das div- und select-Element, das wir zuvor in der Meta-Box leer gelassen haben.
/ * js / admin.js * / var answers = neue Quiz.Collection (wpq.answers); var selectElem = new Quiz.Views.Select (collection: answers, el: wpq.answerSelect); var input = new Quiz.Views.Inputs (collection: answers, el: wpq.answerInput);
Wenn Sie es bis zum Ende geschafft haben, sollten Sie jetzt ein voll funktionsfähiges Beispiel haben, wie Sie Backbone JS in ein WordPress-Plugin integrieren können. Wenn Sie sich die Quelldateien ansehen, werden Sie feststellen, dass die für die Integration von Backbone tatsächlich erforderliche Menge an Code relativ gering ist. Ein Großteil des Codes, den wir hier durchgingen, war der für das Plugin benötigte PHP. Die tägliche Arbeit mit Backbone in den letzten 6 Wochen hat mir einen neuen Respekt für die Front-End-Code-Organisation verschafft. Ich hoffe, Sie können die Vorteile erkennen, die sich aus dieser Arbeit ergeben werden.
In der WordPress-Community kann ich mir vorstellen, dass einige der komplexeren und hochwertigeren Plugins von Backbone wirklich profitieren, und ich fühle mich geehrt, dass ich Ihnen eine Technik mitteilen konnte, die genau das tut.
