5

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

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

我不想做类似的事情，this.$("#eventPicture").on("load", _resizeHeaderPic);因为我有很多视图（它是一个单页应用程序），我可以在加载图像之前返回显示另一个视图。所以，如果我再回到这个视图，我将有两个监听器来监听那个“加载”事件。正确的？通过将所有内容放入 my 中events hash，我可以undelegate正常工作。但似乎“加载#eventPicture”不起作用。有什么建议吗？

4

1 回答 1

4

您无法load从 Backbone 跟踪事件，events因为此事件仅在图像实例上触发并且不会冒泡。所以无法追踪它Backbone.View。$el

图像加载时的 jQuery 回调（即使图像被缓存）

更新

我建议使用另一个概念（JSFiddle）。这是最佳实践：

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();
于 2013-10-12T16:42:24.613 回答