Backbone.js - El Element

W tej chwili wiemy, że poglądy Backbone.js Pracują z logiką prezentacji informacji ustrukturyzowanych za pomocą modelu, pojawia się pytanie, jak wyrażamy to w naszej aplikacji, pracujemy z elementami drzewo DOM tak, że możemy wstawić przez JavaScript różne treści w naszym szablonie.
Aby osiągnąć te cele, mamy element "ten" co odnosi się do nazwy element DOM z którym utożsamiliśmy naszą część wzroku.
Co to jest"?
Ten element jest centralnym składnikiem lub właściwością naszego poglądu, ponieważ jest odniesieniem do element DOM że poglądy są obowiązkowe. Widoki używają "ten" jako właściwość, z którą komponujemy treść i która następnie zostanie wstawiona do DOM.
Istnieją dwa sposoby, w jakie możemy skojarzyć a element DOM z widokiem, pierwszy tworzy nowy i dodaje go do DOM i druga robi odniesienie do istniejącego na stronie.
Tworzenie nowego elementuJeśli chcemy stworzyć nowy element musimy skorzystać z właściwości: tagName, identyfikator i nazwaklasy, w ten sposób framework będzie odpowiedzialny za stworzenie dla nas nowego elementu, a odniesienie do tego elementu będzie dostępne w właściwość „the”, w przypadku, gdy opuścimy Nazwa znacznika domyślnie pusty zostanie utworzony jako div.
Zobaczmy następujący kod, w którym możemy docenić to, czego nauczyliśmy się do tej pory:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // jest wymagane, ale jeśli zostawimy to puste, to jest traktowane jako div className: 'container', // jest opcjonalne, ale możemy przypisać wiele identyfikatorów klas: 'zadanie', // opcjonalnie}); var Widok Zadań = nowy Widok Zadań (); console.log (tasksView .el); // wydrukuje

Jak widzimy, widok tworzymy w prosty sposób, rozszerzając lub dziedzicząc z Backbone.Widok, następnie z wymienionymi właściwościami przypisujemy im wartość, w końcu tworzymy instancję i z a konsola.log () widzimy wynik.
Na poniższym obrazku możemy zilustrować, jak to wygląda w naszym Konsola Chrome:

Tutaj widzimy, jak możemy wygenerować element z etykietą

które określiliśmy w naszej kompilacji widoku.
Metoda SetElement
Ta metoda jest używana, gdy chcemy zastosować widok do innego elementu DOM, który już istnieje, wtedy utworzy nową referencję $, który nie będzie dołączony do oryginalnego elementu, ale będzie wskazywał na nowy, wszystko to w zależności od zdarzenia, które wywołamy.
Zobaczmy w poniższym kodzie, jak to stosujemy:


 // Tworzymy dwa elementy DOM, które reprezentują przyciski var button1 = $ (''); var button2 = $ (''); // Definiujemy nowy widok var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Tworzymy instancję widoku i stosujemy ją do elementu button1 // do button1 var view = new View ({el: button1}); // Teraz stosujemy widok do elementu button2 za pomocą metody setElement view.setElement (button2); button1.trigger ('klik'); button2.trigger ('klik'); 


Powinno to zwrócić prawdziwą wartość, gdy wykonujemy zdarzenie na przycisk2 element Ponieważ widok został do niego zmieniony, zobaczmy obraz, który odnosi się do powyższego wyjaśnienia, aby zakończyć samouczek:




Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt