Привязка событий Backbone.js - PullRequest
17 голосов
/ 11 марта 2011

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

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

Ответы [ 2 ]

44 голосов
/ 11 марта 2011

Привычка 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 объекта события, в зависимости от ситуации.

20 голосов
/ 25 августа 2011

Не могу понять, почему я не могу прокомментировать ответ @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:)

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

...