主干在渲染后添加更多事件？

Question

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

我有一个需要绑定事件的所有元素 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!
        }


    }

必须有一种简单的方法可以将事件添加到呈现后存在的元素。

谢谢

Answer 1

你做错了。与其尝试直接绑定到 #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...
}