0

我正在尝试添加一个BaseView为我的模块中的所有主干视图执行一些初始化。

这是一个小提琴，代码在下面复制

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

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 的子视图：

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不绑定到View? 我究竟做错了什么？

PS：这是基于这里的答案。我专门创建了一个 BaseView 类，以便不会对我的应用程序中的所有主干视图产生全局影响，而只是将其限制在特定模块中

更新：根据@mu下面的答案修复小提琴。将按钮包装在 div 中似乎也不能解决问题。为了简化，我错误地将视图直接绑定到按钮。在我的主应用程序中，按钮位于视图的 el 中，因此在上述 BaseView 到位之前，委派工作得很好。

4

1 回答 1

2

你有几个问题：

  1. 您的 Backbone 代码正在文档中运行，<head>因此它没有#clicker运行时间，因此没有任何东西可以绑定事件。

  2. 您的视图el应该是，#clicker但您的事件正试图绑定到#clicker inside el。来自精美手册：

    委托事件 delegateEvents([events])

    [...] 省略selector导致事件绑定到视图的根元素 ( this.el) 的原因。

    如果你想绑定到点击el，那么你想要：

    events: {
    "click": "clicked"
}

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

于 2012-08-25T22:26:44.840 回答