[英]Backbone.js: my events would not fire! How can I fix this small code?
I'm trying to learn Backbone.js . 我正在尝试学习Backbone.js 。 I've been stuck on this for a whole hour.
我已经坚持了整整一个小时。 I don't get why my event would not fire..
我不明白为什么我的活动不会触发。
JSFIDDLE: http://jsfiddle.net/jancarlo000/ejn2J/ JSFIDDLE: http : //jsfiddle.net/jancarlo000/ejn2J/
JSBIN: http://jsbin.com/efefip/3/edit JSBIN: http ://jsbin.com/efefip/3/edit
see ItemView the one starting on this section: 参见ItemView ,从本节开始:
var ItemView = Backbone.View.extend({ ....
FULL CODE: 完整代码:
var Item = Backbone.Model.extend({ defaults: { Task: 'Study!'} });
var List = Backbone.Collection.extend({});
var MainView = Backbone.View.extend({
tagName: 'ul',
className: '',
initialize: function(){
_.bindAll(this, 'render');
window.list = new List();
window.list.bind('add', this.render, this);
},
render: function(model, collection, options){
var itemView = new ItemView({model:model});
$(this.el).append(itemView.el);
$('body').html(this.el);
return this;
}
});
//-------------- PROBLEM HERE -------------------------------
var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
"click #deleteMe":"deleteMe" //<-- this doesn't fire!
},
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append(this.model.get('Task') +
'<button id="deleteMe">Delete Me</button>');
//WHY WON'T THIS FIRE!!!
return this;
},
deleteMe: function(e){
console.log('called deleteMe');
$(this.el).remove();
}
});
//------------------------------------------------------------
$(function(){
var app = new MainView();
var first = new Item({Task:'Learn JavaScript'});
var second = new Item({Task:'Learn HTML5'});
var third = new Item({Task:'Learn Backbone.JS'});
var fourth = new Item({Task:'Learn .NET MVC'});
list.add([first, second, third, fourth]);
});
In your main view render
, you use $('body').html(this.el);
在主视图
render
,使用$('body').html(this.el);
which replaces the views and their event handlers with unbound elements. 用未绑定的元素替换视图及其事件处理程序。
Removing this line and appending the main view el to the body in the initialize method gives the intended result 删除此行,然后在initialize方法中将主视图el附加到主体,即可得到预期的结果
var MainView = Backbone.View.extend({
tagName: 'ul',
className: '',
initialize: function(){
_.bindAll(this, 'render');
window.list = new List();
window.list.bind('add', this.render, this);
$('body').append(this.el);
},
render: function(model, collection, options){
var itemView = new ItemView({model:model});
$(this.el).append(itemView.el);
console.log($(this.el));
return this;
}
});
http://jsfiddle.net/ejn2J/6/ http://jsfiddle.net/ejn2J/6/
And if I may, a few opinions 如果可以的话,我有几点意见
This issue also can be solved by invoking this.delegateEvents(); 也可以通过调用this.delegateEvents();来解决此问题。 after your view is built.
建立视图后。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.