绑定时触发的backbone事件

Question

我需要将点击事件绑定到一定数量的特殊div上，这些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？

(我知道我可能不应该使用像this..but这样的主干视图，它是需求的一部分)

Answer 1

你的代码有两个问题：

1. 回答您的问题时，事件在绑定时触发，因为您在绑定时调用事件处理程序。

$('#roomNumber'+this.roomNumber).on('click', this.enterBooking());

应该是

$('#roomNumber'+this.roomNumber).on('click', this.enterBooking);

注意函数调用的大括号。

• 您设置el的方式是错误的

el: $('#roomColumn' + this.roomNumber),

在backbone中，视图的el属性在调用initialize方法之前设置。这将意味着backbone将尝试查找不期望的元素$('#roomColumnundefined')。相反，您可以将el元素作为选项传递给视图

var roomNumber = 3；var 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);

},
......