Магистральные события, запускаемые при связывании

Question

Мне нужно привязать события клика к определенному количеству специальных div, которые должны быть связаны, известны только во время выполнения, поэтому я подумал просто установить класс для всех этих специальных div и связать их в "events", но затем нажать на один из эти div-ы вызовут запуск всех div-ов, тогда я попытался использовать переменные в событиях, но эти переменные известны только во время выполнения, поэтому оказывается, что они не определены при привязке событий, сейчас я использую jQuery для привязки событий внутри Backbone во время выполнения, но всякий раз, когда я инициализирую представление, событие запускается сразу

var RoomNumber = Backbone.View.extend({
    el: $('#roomColumn' + this.roomNumber),
    initialize: function () {
        _.bindAll(this, 'render');
        this.user = this.options.user;
        this.roomNumber = this.options.roomNumber;
        this.render();
        //$('#roomNumber'+this.roomNumber).on('click', this.enterBooking());
    },
    render: function () {
        $(this.el).append("<div class = 'roomNumber' id  = 'roomNumber" + this.roomNumber + "'>" + this.roomNumber + "</div>");
    },
    enterBooking: function () {
        var slideForm = new SlideForm({
            user: this.user,
            roomNumber: this.roomNumber,
            state: 'book',
            singleSchedule: new Schedule()
        });
    }
});

Кто-нибудь любезно объяснит, почему это произойдет? И как я могу привязать события к динамически генерируемым div?

(Я знаю, что, вероятно, не следовало использовать такое представление магистрали, но это часть требований)

Answer 1

У вашего кода две проблемы:

1. Отвечая вашей точке зрения, события запускаются при привязке, потому что вы вызываете обработчик событий во время привязки.

   $('#roomNumber'+this.roomNumber).on('click', this.enterBooking());
   должно быть
   $('#roomNumber'+this.roomNumber).on('click', this.enterBooking);
   Обратите внимание на фигурные скобки вызова.

2. То, как вы настроили эль, неверно

   el: $('#roomColumn' + this.roomNumber),
   В позвоночнике, el свойство представления устанавливается до initialize метод вызывается. Это будет означать, что магистраль будет пытаться найти элемент $('#roomColumnundefined') чего не ожидается. Вместо этого вы можете передать el элемент как опция для представления

       var roomNumber = 3;
       var view = new RoomNumber({
           roomNumber:roomNumber,
           el:$('#roomColumn' + roomNumber)
       });
   

Answer 2

......
//Pseudo code
render: function () {
    $(this.el).append("<div class = 'roomNumber' id  = 'roomNumber" + this.roomNumber + "'>" + this.roomNumber + "</div>");

    //you can dynamic set up events like this:
    this.events["click #roomNumber"+this.roomNumber] = "enterBooking";
    this.delegateEvents(this.events);

},
......