Backbone在渲染后添加更多事件?

时间:2015-06-03 21:16:53

标签: javascript jquery backbone.js backbone-events

如何在将集合渲染到视图后添加更多事件。

我有一个列表,其中包含需要绑定事件的所有元素ID。

目前我正在尝试使用jQuery onclick在我的视图中触发对函数的回调。

但问题是我的视图中的函数调用在jQuery click事件中是未定义的。

我查看了Backbone文档,它说要使用delegateEvents但是文档没有显示示例....

http://documentcloud.github.io/backbone/#View-delegateEvents

//add more dynamic events for the rendered employee list 
    addMoreEvents: function ()
    {
        console.log("List View - Add More DOM Events");


        for (var i = 0; i < this.employees.models.length; i++)
        {
            var element = "#" + this.employees.models[i].attributes.id;
            //bind event that when user clicks on <li> on employeelist , it will go fetch all the tasks for that employee
            $(element).click(this.getEmployeeInfo()); //not working!
        }


    }

必须有一种简单的方法来将事件添加到渲染后存在的元素中。

由于

1 个答案:

答案 0 :(得分:2)

你这是错误的方式。您应该将一个类附加到要单击的内容上,然后使用视图的普通#some-id对象将单击处理程序绑定到该类的元素,而不是尝试直接绑定到events元素上的单击事件。

例如,您在视图el中的HTML中有这样的内容:

<li class="item" id="6">Where</li>
<li class="item" id="11">is</li>
<li class="item" id="23">pancakes</li>
<li class="item" id="42">house?</li>

然后您在视图中看到events这样的内容:

events: {
    'click .item': 'getEmployeeInfo'
}

然后,您的点击处理程序getEmployeeInfo可以查看ev.currentTarget.id以获取所点击项目的id属性:

getEmployeeInfo: function(ev) {
    var id = ev.currentTarget.id; // this will be the model's `id`
    // do whatever needs to be done...
}