Backbone.js 如何委派一名；“加载”；DOM事件？

我想在触发“加载”事件时调用函数：

events: {
    "load #eventPicture" : "_resizeHeaderPic"
}

我不想做像这样的事情。$（“#eventPicture”）。在（“加载”上，_resizeHeaderPic）因为我有很多视图（这是一个单页应用程序），在加载图像之前，我可以返回显示另一个视图。所以，如果我再回到这个视图，我将有两个“加载”事件的侦听器。对吗？通过将所有内容放入我的

事件散列

，我可以

正确地取消删除

。

---

但“加载事件图片”似乎不起作用。有什么建议吗？

您无法从主干

事件中跟踪
加载
事件，因为此事件仅在映像实例上激发，不会冒泡。因此，
Backbone.View
的
$el
无法跟踪它


更新
我建议使用另一个概念（）。这是最佳做法：

var LayoutView = Backbone.View.extend({
    el : '[data-container]',
    show : function (view) {
        // remove current view
        this.$view && this.$view.remove();
        // save link to the new view
        this.$view = view;
        // render new view and append to our element
        this.$el.html(this.$view.render().el);
    }
});

var ImageView = Backbone.View.extend({
    template : _.template('<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/1375054_4823566966612_1010607077_n.jpg"/>'),
    render : function () {
        this.$el.html(this.template());
        this.$('img').on('load', _.bind(this.onLoad, this));
        return this;
    },
    onLoad : function () {
        console.log('onLoad');
    }
});

var OtherView = Backbone.View.extend({
    template : _.template('lalala'),
    render : function () {
        this.$el.html(this.template());
        return this;
    }
});

var Router = Backbone.Router.extend({
    routes : {
        'other' : 'other',
        '*any' : 'image'
    },
    initialize : function (options) {
        this.layout = new LayoutView();
    },
    other : function () {
        this.layout.show(new OtherView());
    },
    image : function () {
        this.layout.show(new ImageView());
    }
});

new Router();
Backbone.history.start();

var LayoutView=Backbone.View.extend({
el:“[数据容器]”，
显示：功能（视图）{
//删除当前视图
this.$view&&this.$view.remove（）；
//保存指向新视图的链接
这.$view=view；
//呈现新视图并附加到元素
this.$el.html（this.$view.render（）.el）；
}
});
var ImageView=Backbone.View.extend({
模板：u.模板（“”），
渲染：函数（）{
this.el.html（this.template（））；
this.$（'img'）.on（'load'，_u.bind（this.onLoad，this））；
归还这个；
},
onLoad:function（）{
console.log（'onLoad'）；
}
});
var OtherView=Backbone.View.extend({
模板：u.template（'lalala'），
渲染：函数（）{
this.el.html（this.template（））；
归还这个；
}
});
var Router=Backbone.Router.extend({
路线：{
‘其他’：‘其他’，
“*任何”：“图像”
},
初始化：函数（选项）{
this.layout=新建LayoutView（）；
},
其他：功能（）{
this.layout.show（新的OtherView（））；
},
图像：函数（）{
this.layout.show（新的ImageView（））；
}
});
新路由器（）；
Backbone.history.start（）；
Mmmm我明白了。我找到的唯一解决方案是覆盖视图的
remove
功能，并放置
this.$（“#muse eventPicture”）.off（“load”）。你认为这是最简单的解决方案吗？请记住，我已经为其他目的覆盖了
删除
，您不需要关闭
加载
事件
remove
方法从DOM中删除整个视图元素及其所有子元素和事件。事实上，
视图与其他
视图共享相同的
div
。当然，每次只显示一个视图，当渲染一个视图时，它将取代另一个视图。但是“根”
div
永远不会被删除。这意味着以前的侦听器可能仍在侦听事件（我遇到过重复侦听器的情况，换句话说，以前视图实例的侦听器仍在侦听DOM事件）。这就是为什么我需要删除我所听到的，我已经更新了答案，并建议遵循它。或者像上面描述的那样使用
off
。