Backbone.js Связывание событий - программирование

Я использую Backbone.js, который имеет сегментированный элемент пользовательского интерфейса управления для каждого вида модели. Каждый из них состоит из ul с несколькими элементами li. Я хочу связать событие таким образом, что при щелчке одного из этих элементов я могу определить, какой из них был нажат, и обновить модель с соответствующим значением.

Проблема заключается в том, что Backbone связывает события (они находятся в хэш-представлении событий), так что "this" в функции обратного вызова относится к представлению, а не к элементам li. Это означает, что я не могу определить, какой из нескольких элементов li был нажат. Если я использовал обычную привязку jQuery, я могу привязать "this" к элементам li, но потом я больше не отслеживаю модель, поэтому я не могу ее обновить.

Ответы

Ответ 1

jQuery привычка устанавливать this к тому, что будет удобно в то время, является довольно неприятной моделью, на мой взгляд - к счастью, вам никогда не придется полагаться на нее:

onClick: function(e) {
  this;                // Still the view instance (as it should be).
  e.target;            // The element that was clicked.
  e.currentTarget;     // The element that was bound by the click event.
}

... Вы можете использовать target или currentTarget объекта события, если это необходимо.

Ответ 2

Не могу понять, почему я не могу прокомментировать ответ @jashkenas выше. Его метод правильный (спасибо!), Но я подумал, что я проясню ситуацию: в обработчике событий вы можете восстановить элемент, к которому было привязано событие. Пример кода базовой линии будет выглядеть так:

MyView = Backbone.View.extend({
    events: {
        'click .item': 'handleClick'
    },

    handleClick: function(e) {
        this; // The view instance
        e.target; // The element that was clicked 
        e.currentTarget; // The element that was bound by the click event
    }
});

Я использую это, чтобы настроить текст по умолчанию во всех моих полях формы... да, я еще немного не в HTML5:)

Edit: Btw, e.target является сырым элементом. Вам нужно будет использовать $(e.target), чтобы получить доступ к jQuery.