有人可以告诉我为什么以下不起作用.我点击链接时会发出警报
<body>
<a class="newnote" href="#">Add new note</a>
</body>
<script>
var note = Backbone.Model.extend({});
var notes = Backbone.Collection.extend({
model: note,
url: '<?= $this->createUrl('/filenotes/api'); ?>'
});
var note_view = Backbone.View.extend({
el: 'table',
});
var Appview = Backbone.View.extend({
el: $('body'),
events: {
"a click" : "showForm"
},
initialize: function(){
//alert('hi');
},
showForm: function(){
alert('hi');
}
});
var v = new Appview();
</script>
这里有一个jsfiddle http://jsfiddle.net/neilcharlton/yj5Pz/1/
Der*_*ley 19
您的$("body")选择器在加载DOM之前触发,因此它返回空并且从不绑定到链接.
Backbone对象定义是使用对象文字定义的,这意味着它们会在定义时立即进行评估,而不是在实例化模型时进行评估.
这个:
Backbone.View.extend({foo: "bar"})
在功能上与此相同:
var config = {foo: "bar"};
Backbone.View.extend(config);
由于您有一个$("body")选择器作为值el,因此只要解析了View配置就会对其进行评估,这意味着DOM尚未加载,并且不会返回任何内容.
解决这个问题有很多选择...所有这些都涉及延迟选择器的评估,直到加载DOM之后.
我个人最喜欢的是在DOM加载后将选择器传递给实例化的视图:
var AppView = Backbone.View.extend({
// don't specify el here
});
$(function(){
// after the DOM has loaded, select it and send it to the view
new AppView({ el: $("body") });
}
另外 - 像Skylar说,你的事件被宣布错了.
这是一个有效的JSFiddle:http://jsfiddle.net/yj5Pz/5/