Backbone.js - El Element

În acest moment știm că opiniile din Backbone.js Ei lucrează cu logica modului de prezentare a informațiilor structurate cu modelul, se pune întrebarea cum exprimăm acest lucru în aplicația noastră, ceea ce facem este să lucrăm cu elementele din Copac DOM astfel încât să putem introduce prin Javascript diferitele conținuturi din șablonul nostru.
Pentru a atinge aceste obiective avem elementul "cel" care se referă la numele Element DOM cu care ne-am identificat partea de vedere.
Ce este"?
Acest element este componenta sau proprietatea centrală a vederii noastre, deoarece este referința la Element DOM că este obligatoriu ca punctele de vedere să aibă. Utilizarea vizualizărilor „cel” ca proprietate cu care compunem conținutul și care va continua apoi să fie inserată în DOM.
Există două moduri în care putem asocia o Element DOM cu vederea, primul creează una nouă și o adaugă la DOM și la al doilea face o trimitere la una existentă în cadrul paginii.
Crearea unui element nouDacă dorim să creăm un element nou, trebuie să folosim proprietățile: tagName, id și className, în acest fel cadrul va fi însărcinat cu crearea noului element pentru noi și o referință la elementul menționat va fi disponibilă în proprietatea "cea", în cazul în care părăsim nume eticheta gol în mod implicit va fi creat ca div.
Să vedem următorul cod în care putem aprecia ceea ce am învățat până acum:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // este obligatoriu dar dacă îl lăsăm gol este luat ca div className: 'container', // este opțional, dar putem atribui mai multe clase id: „sarcină”, // opțional}); var TasksView = new TasksView (); console.log (tasksView .el); // va imprima

După cum putem vedea, creăm o vizualizare într-un mod de bază extinzând sau moștenind de la Coloana vertebrală, apoi cu proprietățile menționate le atribuim o valoare, în final instanțăm și cu a console.log () vedem rezultatul.
În imaginea următoare putem ilustra cum arată acest lucru în Consolă Chrome:

Aici vedem cum am putea genera un element cu eticheta

pe care le-am specificat în concepția noastră.
Metoda SetElement
Această metodă este utilizată atunci când dorim să aplicăm vizualizarea la un alt element DOM care există deja, atunci va crea o nouă referință $ the, care nu va fi atașat la elementul original ci va indica spre cel nou, toate acestea în funcție de evenimentul pe care îl numim.
Să vedem în următorul cod cum aplicăm acest lucru:


 // Creăm două elemente DOM care reprezintă butoanele var button1 = $ (''); var buton2 = $ (''); // Definim o vizualizare nouă var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Creăm o instanță a vizualizării și o aplicăm elementului button1 // la butonul1 var view = new View ({el: button1}); // Acum aplicăm vizualizarea elementului button2 cu metoda setElement view.setElement (button2); button1.trigger ('click'); button2.trigger ('faceți clic'); 


Aceasta ar trebui să returneze o valoare adevărată atunci când executăm evenimentul pe element button2 Deoarece vizualizarea a fost modificată, să vedem imaginea care se referă la cele explicate mai sus pentru a finaliza tutorialul:




V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv