绑定时触发的主干事件答案

【问题标题】：backbone events triggered when binding绑定时触发的主干事件
【发布时间】：2012-07-30 22:37:50
【问题描述】：

我需要将点击事件绑定到一定数量的特殊div上，应该绑定哪些div只有在运行时才知道所以我想简单地为所有这些特殊的 div 设置一个类并将它们绑定在“事件”中，但是然后单击其中一个 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？

（我知道我可能不应该使用这样的主干视图......但这是要求的一部分）

【问题讨论】：

您是如何生成视图的？你能包括调用new RoomNumber()的代码吗？

标签： backbone.js backbone-events backbone-views

【解决方案1】：

您的代码有两个问题：

回答您的观点，绑定时会触发事件，因为您在绑定时正在调用事件处理程序。

$('#roomNumber'+this.roomNumber).on('click', this.enterBooking());
应该是
$('#roomNumber'+this.roomNumber).on('click', this.enterBooking);
注意函数调用大括号。
你设置el的方式不对

el: $('#roomColumn' + this.roomNumber),
在主干中，视图的el 属性在调用initialize 方法之前设置。这意味着主干将尝试查找不期望的元素$('#roomColumnundefined')。相反，您可以将 el 元素作为选项传递给视图
```
    var roomNumber = 3;
    var view = new RoomNumber({
        roomNumber:roomNumber,
        el:$('#roomColumn' + roomNumber)
    });
```

【讨论】：

这些确实是问题，没有人回答，所以我最终自己想通了。无论如何感谢您的帮助

【解决方案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);

},
......

【讨论】：