javascript - 为什么从 Backbone 中的自定义 BaseView 扩展时， 'events' 没有绑定(bind)到 View ？

我正在尝试添加一个 BaseView 来为我的模块中的所有 Backbone View 执行一些初始化。

这是一个fiddle代码复制如下

创建自定义 BaseView 并让它订阅调度程序上的“关闭”事件。从而让它成为所有 children 创作的一部分。

var dispatcher = _.clone(Backbone.Events);

var ctor = Backbone.View;
var BaseView = Backbone.View.extend({
    //override Backbone's constructor
    constructor: function(options) {

        ctor.apply(this, arguments);

        dispatcher.on('close', this.close, this);

    },

    close: function() {

        console.log(this.cid);

    }

});

//Is this really needed??
BaseView.prototype.constructor = Backbone.View;

创建继承自BaseView的 subview :

var View = BaseView.extend({
    el: '#clickholder',

    initialize: function() {
        _.bindAll(this);
    },

    //Events not bound?
    events: {
        "click #clicker": "clicked"
    },

    //never called :(
    clicked: function(e) {
        alert("clicked button");
    }
});

new View();

这是 HTML:

<div id="clickholder">
<button id="clicker">Clicker</button>
</div>

问题:如果单击该按钮，则永远不会触发该事件，也永远不会显示警报。我不确定问题是什么。我花了很长时间，但无法理解为什么 events 没有绑定(bind)到 View？我做错了什么？

PS:这是基于答案here 。我专门创建了一个 BaseView 类，以免全局影响我的应用程序中的所有 Backbone View ，而只是将其限制在特定模块

更新:根据下面@mu的回答修复了 fiddle 。将按钮包裹在 div 中似乎也不能解决问题。为了简化，我错误地将 View 直接绑定(bind)到按钮。在我的主应用程序中，按钮位于 View 的“内部”，因此在上述 BaseView 到位“之前”，委派工作得很好。

最佳答案

您遇到一些问题:

您的 Backbone 代码正在文档 <head> 中运行所以没有#clicker当它运行时，没有任何东西可以绑定(bind)事件。
您的 View 是el应该是 #clicker但您的事件正在尝试绑定(bind)到 #clicker 里面 el 。来自 fine manual :

delegateEvents delegateEvents([events])

[...] Omitting the selector causes the event to be bound to the view's root element (this.el).

如果您想绑定(bind)到el上的点击，那么你想要:
```
events: {
    "click": "clicked"
}
```

更新的演示:http://jsfiddle.net/ambiguous/fTrSj/

关于javascript - 为什么从 Backbone 中的自定义 BaseView 扩展时， 'events' 没有绑定(bind)到 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12126031/

javascript - 为什么从 Backbone 中的自定义 BaseView 扩展时， 'events' 没有绑定(bind)到 View ？

上一篇：javascript - 我如何引用原型(prototype)的父级？

下一篇：javascript - Ajax - "Access-Control-Allow-Origin"错误