W jaki sposób Backbone.js śledzi elementy DOM bez użycia identyfikatorów?

Question

Tło

Używam backbone.js od pewnego czasu i jednym z aspektów tego, że imponuje mi jak to pozwala mi na uproszczenie, abstrakcyjne i ponowne DOM elementy jak „poglądy”. Próbowałem przeczytać niektóre z adnotacjami źródła i jestem zaznajomiony z JQuery, ale mają małą wiedzę o tym, jak DOM działa na głębszym poziomie.

Pytanie

jaki sposób elementy backbone.js tie DOM do poglądów bez przypisywania id, klasy lub inny atrybut do nich?

tj

<ul> 
    <li>Item one</li> 
    <li>Item two</li> 
    <li>Item three</li> 
</ul> 

Uwielbiam to, że robi to Backbone i chcieliby wiedzieć jak robi to!

Answer 1

W javascriptie zmienna może zawierać referencję (tj. Programową rzecze, która "odnosi się do") do jakiegoś elementu DOM, który jest tylko obiektem JavaScript. Szkielet zapewnia, że ​​dla widoku przynajmniej ten element istnieje. Na przykład, w jQuery, gdy odnoszą się do trzeciej pozycji na liście:

var item3 = $('ul li').eq(2); 

(To zero-offset listy pierwszy element jest na indeksie 0, trzeci w indeksie 2), można teraz zmienić tekst z „trójki” do pozycji „item trzypunktowym jeden cztery jeden pięć dziewięć” zwykłych manipulatorów jQuery DOM:

item3.text("Item three point one four one five nine"); 

Mimo że element listy nie mają określonej klasy lub identyfikatora atrybuty.

Pole el w widoku szkieletowym zawiera stałe odniesienie do elementu nadrzędnego, w którym widok ten renderuje wszystkie jego elementy. Backbone używa menedżera zdarzeń jQuery delegate do dołączania ogólnej procedury obsługi zdarzeń do tego stałego odniesienia. Za każdym razem, gdy zdarzenie ma miejsce w obrębie elementu DOM lub dowolnego z jego elementów podrzędnych, uczestnik przechwytuje zdarzenie wraz z odniesieniem do określonego obiektu DOM w obiekcie macierzystym el, który utworzył zdarzenie, a szkielet używa dość standardowej magii jQuery do odwzorowania tego na obsługa zdarzeń w widoku.

To rzeczywiście bardzo fajne rzeczy.

Powinienem dodać, że "stała" cecha odniesienia el jest wiarygodna. Jeśli dodajesz logikę widoku do istniejącego elementu HTML, przypisujesz jeden raz do el w widoku initialize(). JavaScript nie wymusza żadnego pojęcia stałości, ale powinieneś tylko bezpośrednio przypisać do el (tj. this.el = something()), jeśli jesteś pewien, że wiesz, co robisz.