Как Backbone.js отслеживает элементы DOM без использования идентификаторов?

Фон

Я использую Backbone.js в течение некоторого времени, и один из аспектов, который впечатляет меня, - это то, как он позволяет мне упрощать, абстрагировать и повторно использовать элементы DOM как "виды". Я попытался прочитать некоторые из аннотированных источников и знаком с JQuery, но мало знаю, как DOM работает на более глубоком уровне.

Вопрос

Как Backbone.JS связывает элементы DOM с представлениями без присвоения им идентификатора, класса или другого атрибута?

то есть.

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

Мне нравится, что Backbone делает это и хотел бы знать как он делает это!

Ответы

Ответ 1

В javascript переменная может содержать ссылку (т.е. программную вещь, которая "ссылается" ) на какой-либо элемент DOM, который является всего лишь объектом Javascript. Магистраль гарантирует, что для представления, по крайней мере, этот элемент существует. Например, в jQuery, когда вы ссылаетесь на третий элемент в своем списке:

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

(Это список нулевого смещения, первый элемент находится в индексе 0, третий - в индексе 2), теперь вы можете изменить текст из "пункта 3" на "Пункт три точки один четыре один пять девять" с обычным jQuery DOM-манипуляторы:

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

Даже если этот элемент списка не имеет каких-либо определенных атрибутов класса или идентификатора.

В поле ) содержится постоянная ссылка на родительский элемент, в котором это представление отображает все его содержимое. Backbone использует диспетчер событий jQuery delegate для присоединения общего обработчика событий к этой постоянной ссылке. Всякий раз, когда событие происходит внутри этого элемента DOM или любого из его дочерних элементов, делегат ловит это событие вместе со ссылкой на конкретный объект DOM в родительском el, который создал событие, а магистраль использует некоторую довольно стандартную магию jQuery для сопоставления это для обработчика события в представлении.

Это, действительно, очень классный материал.

Я должен добавить, что "постоянная" -ность справочника el, er, спорна. Если вы привязываете логику представления к существующему элементу HTML, вы назначаете el один раз, в представлении initialize(). Javascript не применяет какое-либо понятие о постоянстве, но вы должны назначать только el (т.е. this.el = something()), если вы уверены, что знаете, что делаете.