我有一个非常奇怪的问题。我正在尝试实现“根” View ，它也可以用作某些 namespace 结构。 codeschool.com 类(class)第二部分中介绍了相同的原理。在这个 Root View 中，我想捕获事件“单击按钮”，但这就是问题所在。当我点击按钮时什么也没发生。
window.App = new (Backbone.View.extend({
el: $("#app"),
Collections: {},
Models: {},
Views: {},
Routers: {},
events: {
'click button' : function(e) {
alert("Thank god!");
}
},
render: function(){
//for test purposes
console.log($("#app").find("button"));
console.log(this.$el.find('button'));
},
start: function(){
this.render();
new App.Routers.PostsRouter();
Backbone.history.start({pushState: true});
}
}))();
$(document).ready(function() { App.start() });
HTML 看起来像这样
<body>
<div id="app">
<div id="posts"></div>
<button>Click me</button>
</div>
</body>
真正奇怪的是渲染函数中 console.log 的输出。两个选择器都是相同的，甚至上下文也相同，那么问题出在哪里呢？
console.log($("#app").find("button")); //this returns correct button
console.log(this.$el.find('button')); //this returns 0 occurences (WTF?)
编辑:
在 el: "#app" 稍作修改后，仍然存在同样的问题。问题是(感谢@nemesv)在加载 DOM 之前实例化此类。但是，在加载 DOM 后不可能实例化，因为这样就不可能使用该命名空间结构(例如 App.Model.Post = Backbone.Model.extend() )。但这种“具有 namespace 结构的主视图”是在 codeschool.com 类(class)中作为某种良好实践引入的。解决方案可以在那里找到http://jsfiddle.net/BckAe
最佳答案
您已将 el 指定为 jquery 选择器，但由于您位于对象文字内部，因此在加载 DOM 之前它会立即求值。
因此 el: $("#app"), 不会选择任何内容。
您可以通过使用一项 Backbone 功能来解决此问题，您可以将 el 初始化为包含选择器的字符串。
因此将您的 el 声明更改为:
el: "#app"
您的点击事件不会被触发，因为您在加载 DOM 之前实例化了 View ，因此主干无法为您进行事件委托(delegate)。
因此，您需要将 View 声明和创建分为两个步骤。并且仅在加载 DOM 时实例化您的 View :
var AppView = Backbone.View.extend({
el: "#app",
//...
});
$(document).ready(function()
{
window.App = new AppView();
App.start()
});
演示:JSFiddle .
关于events - 单击事件未在 Backbonejs 的主视图中触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14828978/