绑定时触发的骨干事件

时间:2012-07-30 22:37:50

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

我需要将click事件绑定到一定数量的特殊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?

(我知道我可能不应该使用这样的骨干视图......但它是要求的一部分)

2 个答案:

答案 0 :(得分:3)

您的代码有两个问题:

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

    $('#roomNumber'+this.roomNumber).on('click', this.enterBooking());
    应该是 $('#roomNumber'+this.roomNumber).on('click', this.enterBooking);注意函数调用大括号。

  2. 你设置el的方式是错误的

    el: $('#roomColumn' + this.roomNumber),
    在骨干网中,视图的el属性在调用initialize方法之前设置。这意味着骨干网会试图找到一个不期望的元素$('#roomColumnundefined')。相反,您可以将el元素作为选项传递给视图

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

答案 1 :(得分:0)

......
//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);

},
......