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 - Remove all sub views

但我应该在哪里发起这个？另外我不知道如何使用eventbus处理事情。

Answer 1

在视图的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/

Answer 2

只想添加@ redconservatory的答案。

我将PhotosListView事件订阅片重写为该格式：

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

取消订阅我在dispose方法使用此方法：

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

不确定这是否是解决此问题的最佳方法，无论是否在任何浏览器上都支持，但在使用dispose方法配备我的应用程序视图后，我将StalenessValidator添加到路由器：< / p>

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
}));

冷却！

杀戮视图，全球活动巴士。骨干

2 个答案: