如何在将集合渲染到视图后添加更多事件。
我有一个列表,其中包含需要绑定事件的所有元素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!
}
}
必须有一种简单的方法来将事件添加到渲染后存在的元素中。
由于
答案 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...
}