Backbone.js - El Element

В момента знаем, че гледките в Backbone.js Те работят с логиката как да представят информацията, структурирана с модела, възниква въпросът как изразяваме това в нашето приложение, това, което правим, е работата с елементите на DOM дърво за да можем да го вмъкнем Javascript различното съдържание в нашия шаблон.
За постигането на тези цели имаме елемента "the" което се отнася до името на DOM елемент с които сме идентифицирали нашата част от гледката.
Какво е"?
Този елемент е централният компонент или свойство на нашия възглед, тъй като е препратка към DOM елемент че е задължително изгледите да имат. Изгледи използват "the" като свойство, с което съставяме съдържанието и което след това ще продължи да се вмъква в DOM.
Има два начина, по които можем да свържем a DOM елемент с гледката, първо създава нов и го добавя към DOM и второ прави препратка към съществуваща в рамките на страницата.
Създаване на нов елементАко искаме да създадем нов елемент, трябва да използваме свойствата: tagName, id и className, по този начин рамката ще отговаря за създаването на новия елемент за нас и препратка към споменатия елемент ще бъде налична в собственост "the", в случай, че напуснем tagName празно по подразбиране ще бъде създадено като div.
Нека да видим следния код, където можем да оценим това, което сме научили досега:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // е задължително, но ако го оставим празно, се приема като div className: 'container', // не е задължително, но можем да присвоим идентификатор на няколко класа: 'задача', // по избор}); var TasksView = нов TasksView (); console.log (tasksView .el); // ще отпечата

Както виждаме, ние създаваме изглед по основен начин, като разширяваме или наследяваме от Гръбнак. Преглед, след това със споменатите свойства им присвояваме стойност, накрая инстанцираме и с a console.log () виждаме резултата.
На следващото изображение можем да илюстрираме как изглежда това в нашия Chrome конзола:

Тук виждаме как бихме могли да генерираме елемент с етикета

които бяхме посочили в нашия view build.
Метод SetElement
Този метод се използва, когато искаме да приложим изгледа към друг DOM елемент, който вече съществува, тогава той ще създаде нова препратка $,, които няма да бъдат прикрепени към оригиналния елемент, но ще сочат към новия, всичко това в зависимост от събитието, което наричаме.
Нека да видим в следния код как прилагаме това:


 // Създаваме два DOM елемента, които представляват бутони var button1 = $ (''); var button2 = $ (''); // Определяме нов изглед var View = Backbone.View.extend ({събития: {click: function (e) {console.log (view.el === e.target);}}}); // Създаваме екземпляр на изгледа и го прилагаме към елемента button1 // към button1 var view = new View ({el: button1}); // Сега прилагаме изгледа към елемента button2 с метода setElement view.setElement (button2); button1.trigger ('щракване'); button2.trigger ('щракване'); 


Това трябва да върне истинска стойност, когато изпълняваме събитието в button2 елемент Тъй като изгледът е променен на него, нека да видим изображението, което се отнася до горното, обяснено, за да завършим урока:




Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка