Turinys
Šiuo metu mes žinome, kad vaizdai Backbone.js Jie dirba su logika, kaip pateikti informaciją, susistemintą pagal modelį, kyla klausimas, kaip tai išreiškiame savo programoje, ką mes darome - dirbame su DOM medis kad galėtume įterpti Javascript skirtingas mūsų šablono turinys.Šiems tikslams pasiekti turime elementą "tas" kuris nurodo pavadinimą DOM elementas su kuriomis identifikavome savo regėjimo dalį.
Kas yra"?
Šis elementas yra pagrindinis mūsų požiūrio komponentas ar savybė, nes jis yra nuoroda į DOM elementas kad pažiūros yra privalomos. Peržiūrų naudojimas "tas" kaip nuosavybę, su kuria sudarome turinį ir kuri vėliau bus įterpta į DOM.
Yra du būdai, kuriais galime susieti a DOM elementas su regėjimu, Pirmas sukuria naują ir prideda jį prie DOM ir antra daro nuorodą į esamą puslapyje.
Naujo elemento kūrimasJei norime sukurti naują elementą, turime naudoti šias savybes: tagName, id ir className, tokiu būdu sistema bus atsakinga už naujo elemento sukūrimą ir nuoroda į tą elementą bus pateikta turtas "", jei paliekame tagName tuščias pagal numatytuosius nustatymus bus sukurtas kaip div.
Pažiūrėkime šį kodą, kuriame galime įvertinti tai, ką iki šiol išmokome:
var TasksView = Backbone.View.extend ({tagName: 'ul', // yra būtinas, bet jei paliksime jį tuščią, jis bus laikomas div className: 'container', // tai neprivaloma, tačiau galime priskirti kelių klasių ID: 'task', // neprivaloma}); var TasksView = naujas TasksView (); console.log (taskView .el); // atspausdinsKaip matome, vaizdą sukuriame iš esmės išplėsdami arba paveldėdami Nugaros.Vaizdas, tada su minėtomis savybėmis mes priskiriame jiems vertę, galiausiai akimirksniu ir su a console.log () matome rezultatą.
Kitame paveikslėlyje galime parodyti, kaip tai atrodo mūsų „Chrome“ konsolė:
- kurį nurodėme savo struktūros rodinyje.
„SetElement“ metodas
Šis metodas naudojamas, kai norime pritaikyti rodinį kitam jau egzistuojančiam DOM elementui, tada bus sukurta nauja nuoroda $, kuris nebus pritvirtintas prie pradinio elemento, bet nurodys į naują, visa tai priklauso nuo įvykio, kurį mes vadiname.
Pažvelkime į šį kodą, kaip mes tai taikome:
// Sukuriame du DOM elementus, vaizduojančius mygtukus var button1 = $ (''); var mygtukas2 = $ (''); // Mes apibrėžiame naują rodinį var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Sukuriame rodinio egzempliorių ir pritaikome jį elementui button1 // mygtukui1 var view = new View ({el: button1}); // Dabar vaizdą pritaikome elementui button2 naudodami metodą setElement view.setElement (button2); button1.trigger ('paspaudimas'); button2.trigger ('paspaudimas'); Tai turėtų grąžinti tikrąją vertę, kai įvykdysime įvykį „button2“ elementas Kadangi vaizdas buvo pakeistas į jį, pažiūrėkime vaizdą, nurodantį aukščiau pateiktą paaiškinimą, kad užbaigtume pamoką:
