Share
Bine ați venit la partea a doua a Utilizării Backbone în cadrul programului WordPress Admin. În prima parte, am creat plugin-ul "back-end" al plugin-ului nostru și acum, în a doua parte, vom termina adăugând funcționalitatea "client-side" sau "front end". Pentru o prezentare generală a ceea ce construim în acest tutorial, împreună cu structura și fișierele noastre de dosare, vă rugăm să revedeți prima parte.
În cadrul src folder, creați altul numit Template-uri și un dosar din interiorul acelei persoane metabox.templ.php. Aici vom plasa HTML-ul necesar meta-casei noastre. Este, de asemenea, o mare oportunitate de a transmite datele JSON necesare pentru răspunsurile noastre.
Dosarele și fișierele ar trebui să arate astfel.
Să aruncăm o privire asupra a ceea ce creăm. Vă puteți gândi la fiecare răspuns ca la Model de date și pentru că vom folosi șabloane de pe partea clientului pentru a genera o vedere pentru fiecare, această viziune poate reacționa la modificările din model. Acest lucru ne permite să fim foarte specifici atunci când legăm evenimentele la UI și, firește, duce la un flux de lucru mai ușor - odată ce ți-ai doborât capul în jurul tău,.
În interiorul noului nostru creat metabox.templ.php, acesta este modelul pe care îl vom folosi pentru fiecare dintre modelele noastre. Puteți vedea că în principiu înfășurăm câteva coduri HTML într-o etichetă de script. Dăm tagului scriptul atributul type = "text / șablon" astfel încât browserul să nu fie afișat pe pagină. Această bucată mică de HTML va fi utilizată mai târziu pentru a genera marcajul necesar pentru fiecare vizualizare. Vom folosi capabilitățile șablonului încorporat de Underscore, astfel încât valorile înfășurate astfel vor fi înlocuite ulterior cu datele din modelele noastre.
Încă înăuntru src / template-uri / metabox.templ.php - aici punem doar containerele care vor fi populate cu intrările din șablonul de mai sus. Acest lucru se întâmplă după ce Backbone a analizat datele JSON necesare pentru model, așa că deocamdată avem tot ce trebuie să facem aici.
Introduceți răspunsurile de mai jos
Răspuns corect:
Ultimul lucru necesar în interiorul lui src / template-uri / metabox.templ.php fișier, este datele JSON care reprezintă fiecare răspuns. Aici creăm un obiect în Spațiul de nume global și apoi atribuim valorile pe care le-am trimis prin $ videotex matrice. Îmi place, de asemenea, să salvez referințele la containerele pe care le vom folosi mai târziu, astfel încât să nu am identificări în două fișiere separate.
Ok, dacă ați ajuns atât de departe, ați configurat plugin-ul pentru a permite utilizarea lui Backbone.js și căsuța dvs. meta va afișa datele de marcare și date JSON necesare. Acum este timpul să le aducem laolaltă și să folosim Backbone.js pentru a organiza codul clientului nostru. Este timpul să acoperiți:
Structura și fișierele dvs. de director final ar trebui să arate așa.
În primul rând, vom înfășura tot ceea ce facem într-o funcție numită imediat și vom trece în jQuery pentru a fi utilizate cu $ semne, nu voi arăta acest pachet în alte fragmente, așa că asigurați-vă că puneți totul în interiorul acestuia.
/ * js / admin.js * / (funcția ($) / ** Codul nostru aici ** / (jQuery));
Apoi trebuie să accesăm datele stocate în spațiul de nume global și, de asemenea, să creăm un obiect nou care să stocheze obiectele Backbone.
/ * js / admin.js * / var Quiz = Vizualizări: ; var wpq = fereastră.wpQuiz;
Modelul reprezintă un singur răspuns. În constructorul său facem câteva lucruri.
Accentsconagua
fals ajaxurl care este disponibilă pe fiecare pagină de administrare. De asemenea, adăugăm numele metodei noastre care gestionează solicitarea ajaxtoJSON metoda de adăugare a ID-ului postului curent pentru fiecare model. Acest lucru ar putea fi făcut în partea de server, dar l-am pus aici ca un exemplu de cum puteți suprascrie ceea ce este salvat pe server (Acest lucru poate veni în foarte la îndemână, motiv pentru care l-am inclus aici) / * js / admin.js * / Quiz.Model = Backbone.Model.extend (defaults: 'corect': false, url: ajaxurl + '? action = save_answer', toJSON: () if (this.get ('answer_id') === wpq.answers.correct) this.set ('corect', adevărat);); O colecție este în esență doar o învelitoare pentru o grămadă de modele și face ca lucrul cu aceste modele să fie o briză. Pentru exemplul nostru mic, nu vom modifica colecția, în afară de specificarea modelului pe care ar trebui să îl folosească.
/ * js / admin.js * / Quiz.Collection = Backbone.Collection.extend (model: Quiz.Model);
Prima noastră viziune poate fi considerată ca o împachetare pentru câmpurile individuale de intrare. Nu este necesar să declarăm un șablon sau ce element HTML dorim ca Backbone să creeze pentru noi în acest caz, deoarece mai târziu când instanțiăm această vizualizare, îi vom transmite ID-ul unei div pe care am creat-o în fișierul meta-box. Backbone-ul va folosi pur și simplu acel element ca recipient. Această vizualizare va avea o colecție, iar pentru fiecare model din colecția respectivă, va crea o colecție nouă intrare și adăugați-o la sine.
/ * js / admin.js * / Quiz.Views.Inputs = Backbone.View.extend (initialize: function () this.collection.each (this.addInput, this);, addInput: functie ) var intra = nou Quiz.Views.Input (model: model);
Această vizualizare următoare reprezintă un singur model. În scopul prezentării tipurilor de lucruri pe care le puteți face atunci când codificați JavaScript în acest fel, am încercat să ofer câteva tehnici de interacțiune diferite și să arăt cum să reacționați la cei cu Backbone.
Rețineți că specificăm un "nume etichetaaici, împreună cu un șablon. În cazul nostru, vom lua acest șablon pe care l-am analizat mai devreme, îl vom analiza folosind datele din model și apoi vom împacheta totul într-o p tag (care ne va da un pic frumos de margine în jurul fiecăruia).
De asemenea, rețineți modul în care evenimentele sunt legate de elementele dintr-o vizualizare. Mult mai curat decât apelul mediu JQuery și ceea ce este chiar mai bun este capacitatea de a utiliza un selector jQuery ca acesta acest lucru. $ ( 'intrare') în opinia noastră știind că acestea sunt în mod automat scop în vedere. Acest lucru înseamnă că jQuery nu se uită la întreg DOM atunci când încearcă să se potrivească cu un selector.
În această privință, vom putea:
/ * js / admin.js * / Quiz.Views.Input = Backbone.View.extend (tagName: 'p', // Obțineți șablonul din șablonul DOM: _. template ($ (wpq.inputTempl) .html ()), // Când un model este salvat, returnați butonul la starea dezactivată initialize: function () var _this = this; this.model.on ('sync', function () _this. $ '); .text (' Salvează ') .attr (' dezactivat ', adevărat););, // Atașarea evenimentelor de evenimente: ' keyup input ':' blur ' click ':' save ', // Efectuati functia Save save: (e) e.preventDefault (); $ (e.target) .text (' wait '); this.model.save , // Actualizați atributele modelului cu date din zona de intrare blur: funcție () var input = this. $ ('Input') val (); if (input! == this.model.get )) this.model.set ('răspuns', intrare), acest $ ('buton'), attr ('dezactivat', false);, // Render input unic - funcția () this.model.set ('index', acest.model.collection.indexOf (acest.model) + 1); acest $. el.html (this.template (acest model la JSON ())); returnați acest lucru; ); Acest element de selectare este locul în care utilizatorul poate alege răspunsul corect. Când această vizualizare a fost instanțiată, ea va primi aceeași colecție de modele pe care le-a făcut ambalajul intrărilor. Aceasta va fi utilă mai târziu, deoarece vom putea asculta modificările aduse modelului în câmpurile de intrare și vom actualiza automat valorile corespunzătoare în acest element selectat.
/ * js / admin.js * / Quiz.Views.Select = Backbone.View.extend (initialize: function () this.collection.each (this.addOption, this); addOption: var opțiune = noua opțiune Quiz.Views.Option (model: model), acest $ $ el.append (option.render () .el););
Vederea noastră finală va crea un element de opțiune pentru fiecare model și va fi adăugat la elementul de selecție de mai sus. De data aceasta am arătat cum puteți seta dinamic atributele elementului returnând un hash de la o funcție de apel invers atribuită proprietății atributelor. De asemenea, rețineți că în inițializa () metoda pe care am abonat-o pentru a schimba evenimentele de pe model (mai precis, Răspuns atribut). Acest lucru înseamnă pur și simplu: oricând acest model Răspuns atributul este modificat, apelați face() (care în acest caz va actualiza doar textul). Acest concept de "abonare" sau "ascultare" a evenimentelor care apar în cadrul unui model este într-adevăr ceea ce face Backbone.js și multe alte biblioteci să fie atât de puternice, utile și de o bucurie de a lucra cu.
/ * js / admin.js * / Quiz.Views.Option = Backbone.View.extend (tagName: 'opțiune', // returnarea unui hash ne permite să setăm atributele dinamice: function () return : this.model.get ('answer_id'), 'selectat': this.model.get ('corect'), // Urmăriți modificările aduse fiecărui model (care se întâmplă în câmpurile de introducere și reîncărcați când există este o schimbare initialize: function () this.model.on ('change: answer', this.render, this);, render: function () this. $ el.text (this.model.get (' răspuns)); retur acest lucru;); Suntem atat de aproape acum, tot ce trebuie sa facem este sa instantiati o noua colectie si sa o transmiteti JSON-ului de care are nevoie, apoi instantiati ambele vizualizari "wrapper" pentru elementul select si pentru input-uri. Rețineți că și noi treceți el proprietatea noastră. Acestea sunt referiri la elementul div și selectat pe care l-am lăsat necompletat mai devreme în caseta meta.
/ * js / admin.js * / var răspuns = nou Quiz.Collection (wpq.answers); var selectElem = nou Quiz.Views.Select (colecție: răspunsuri, el: wpq.answerSelect); var inputs = noi Quiz.Views.Inputs (colecție: răspunsuri, el: wpq.answerInput);
Dacă ați reușit până la sfârșit, acum ar trebui să aveți un exemplu pe deplin de lucru în ceea ce privește încorporarea Backbone JS într-un plugin WordPress. Dacă mergeți mai departe și aruncați o privire la fișierele sursă, veți observa că valoarea reală a codului necesar pentru a încorpora Backbone este relativ mică. O mare parte din codul pe care am trecut-o aici a fost PHP-ul necesar pluginului. Lucrul cu Backbone pe o bază zilnică în ultimele 6 săptămâni mi-a dat cu adevărat un respect nou găsit pentru organizarea codului frontal și sper că puteți aprecia beneficiile care vor veni cu siguranță din a lucra în acest mod.
În cadrul comunității WordPress vă pot imagina unele dintre cele mai complexe și de înaltă calitate plug-in-uri acolo beneficiind cu adevărat de utilizarea Backbone și sunt onorat să fi putut să împărtășesc cu dvs. o tehnică pentru a face exact asta.
