javascript - 杀死视图，全球事件总线。骨干

Question

我有一个PhotoCardView：

var PhotoCardView = Backbone.View.extend({
    initialize: function() { this.render(); },
    events: { 'click img': 'activateItem' },
    activateItem: function(e) {
        e.preventDefault();
        bus.trigger('switchToFullScreen', {activatorId: this.model.get('id')});
    }
// ...

和父母PhotosListView：

var PhotosListView = Backbone.View.extend({
    initialize: function() {
        bus.on('switchToFullScreen', function(args) {
            this.switchToFullScreen(args);
        }, this);
        this.render();
    },
    switchToFullScreen: function(args) {
        new ImageGalleryView({ 
            activatorId: args.activatorId,
            collection: this.collection 
        });
    },
 // ...

列表视图在应用程序路由处理程序之一处理：

sampleRouteHandler: function(param1, param2, param3) {
    // ...
    photosList.fetch({
        success: function() {
            var photosListView = new PhotosListView({
                collection: photosList,
                page: p
            });
            $('#content').append(photosListView.el);
    // ...

假设我添加了代码来“杀死”子视图和父视图，如此处所述Backbone.js - 删除所有子视图

但是我应该从哪里开始呢？我也不知道如何处理事件总线的事情。

score 4 · Accepted Answer

在视图的 close 方法中添加它：

var PhotosListView = Backbone.View.extend({
    initialize: function() {
        bus.on('switchToFullScreen', function(args) {
            this.switchToFullScreen(args);
        }, this);
        this.render();
    },
    switchToFullScreen: function(args) {
        new ImageGalleryView({ 
            activatorId: args.activatorId,
            collection: this.collection 
        }); /* not sure if you need to clean it up...if it has event listeners then you do */

    },
    close: function() {
        bus.off('switchToFullScreen', function(args) {
            this.switchToFullScreen(args);
        }, this);
        this.remove(); // removes this PhotoListView
    }
    ...

但是你必须记住在你摆脱视图时调用 close() 方法。

var viewInstance = new PhotosListView();

...

/*  getting rid of the view because 
you are going to another 'page' */

viewInstance.close();

请参阅此示例： http: //lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

score 0 · Accepted Answer

只想添加到@redconservatory 的答案。

我将事件订阅部分重写PhotosListView为该表单：

initialize: function() {
    _.bindAll(this);
    bus.on('switchToFullScreen', this.switchToFullScreen);
    this.render();
},
switchToFullScreen: function(args) {
// ...

取消订阅我使用这个dispose方法：

bus.off('switchToFullScreen', this.switchToFullScreen);

不确定这是否是解决此问题的最佳方法，是否在任何浏览器上都支持它，但是在为我的应用程序视图配备了dispose我添加StalenessValidator到路由器的方法之后：

var StalenessValidator = function() {
    var activeViews = {};

    function validate(view) {
        if(activeViews.hasOwnProperty(view.rootId)) {
            activeViews[view.rootId].dispose();
        }

        activeViews[view.rootId] = view;
        return view;
    }

    return {
        validate: validate
    }
}();

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        this.viewValidator = StalenessValidator;
    // ...

然后我称之为：

var photosListView = _this.viewValidator.validate(new PhotosListView({
    collection: photosList,
    page: p
}));

凉爽的！

javascript - 杀死视图，全球事件总线。骨干

2 回答 2

Related

Reference