Привязать событие клика к тегу верхнего уровня представления Backbone - PullRequest
Новая
       38

Привязать событие клика к тегу верхнего уровня представления Backbone

0 голосов
/ 23 мая 2018

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

var PageSize = Backbone.View.extend({

    tagName: 'option',
    className: "setPageSize",

    initialize: function(options) {
        this.value = options.value;
        this.text = options.text;
    },

    template: _.template(
        "<%=text%>"
    ),

    render: function() {

        this.$el.html(this.template({text: this.text}));
        return this;
    },

    events: {
        'click .setPageSize': 'setPageSize'
    },

    setPageSize: function() {
        console.log(this.value);
    },

});

module.exports = PageSize;

Связка этих представлений PageSize создается другим представлением, которое добавляет их к тегу <select>.Я вполне уверен, что другое представление не является проблемой, поскольку теги <option> отображаются в теге <select> с правильным текстом.

Проблема, с которой я столкнулся, заключается в том, что щелчоксобытие, которое должно сработать при нажатии на данный тег <option>, никогда не срабатывает.Я думаю, это потому, что класс, который отслеживает событие click, является частью самого внешнего тега (класса, указанного с помощью tagName и className), к которому по какой-то причине не прикреплен прослушиватель событий.

Я думаю, что мне нужно каким-то образом привязать событие click ко всему представлению, а не к элементам шаблона в нем, но я совершенно не уверен в том, как мне это сделать.Я пытался сделать this.setElement(this.$el.html()), но это делает так, что ни один из тегов <option> вообще не отображается в <select>.

1 Ответ

0 голосов
/ 23 мая 2018

Из базовой документации DelegateEvents (выделено мной)

Использует функцию jQuery для предоставления декларативных обратных вызовов для событий DOM в представлении.Если хеш событий не передается напрямую, в качестве источника используется this.events.События записываются в формате {"селектор событий": "обратный вызов"}.Обратный вызов может быть либо именем метода в представлении, либо телом прямой функции. Пропуск селектора заставляет событие быть связанным с корневым элементом представления (this.el) .

Проблема в вашем объекте событий.В основном потому, что вы добавили «селектор классов», событие click будет обрабатываться только для элементов в элементе представления, которые имеют класс «.setPageSize».Однако этот класс находится в самом элементе представления, но не в любом из его дочерних элементов, поэтому обработчик никогда не вызывается.

Изменяя это: 

events: {
    'click .setPageSize': 'setPageSize'
},

на следующее: 

events: {
    'click': 'setPageSize'
},

заставляет событие быть связанным с корневым элементом представления (this.el).Другими словами, само представление.

...