Question

我正在考虑从vanilla Backbone转移到Marionette，就像Backbone一样，我首先关心的是确保我没有内存泄漏，因为我建立了一个页面申请。

使用Backbone调试器，我可以看到当我更改LayoutView区域中显示的视图时，HTML确实被破坏了，但模型和/或集合永远保留在内存中。

首先，这是我的PostController代码：

var PostController = Marionette.Object.extend({     
    showOne: function(post_cd){
        // layoutView
        var postView = new PostView();

        // Create data containers
        var comments = new Comments(); // This is a Backbone.Collection
        var post = new Post(); // This is a Backbone.Model

        // Create subviews (compositeView)
        var commentsView = new CommentsView({collection: comments, model: post});

        // Render the compositeView in the layoutView when displaying the layoutView
        postView.on('before:show', function(region, view, options){
            this.showChildView('comments', commentsView);
        });

        // Data init.
        post.fetch();
        comments.fetch();

        // Show the view on the main region.
        // app.layout is another LayoutView binded to <body>
        app.layout.showChildView('main', postView); 
    }
});

接下来，我的UserController代码：

var UserController = Marionette.Object.extend({
    showOne: function(userCd){
        var user = new User({user_cd: userCd});

        // Marionette.ItemView
        var userItemView = new UserItemView({model: user});

        // Fetch the user
        user.fetch();

        // Show the view on the main region
        app.layout.showChildView('main', userItemView); 
    }
});

非常简单，我只是创建一个模型/集合和一个相关的视图，然后在我的＆＃34; main＆＃34;中切换它们。区域。

以下是我非常简单的观点：

首先，UserItemView（在UserController中使用）：

var UserItemView = Marionette.ItemView.extend({
    tagName: 'div',
    template: "<a href='#post/48' id='goToPost'>Go to post 48.</a>",

    events:{
        "click #goToPost": "goToPost",
    },

    goToPost: function(e){
        e.preventDefault();
        app.testRouter.triggerMethod('post:show', 48);
    }
});

我的复合视图＆＃34;评论视图＆＃34; （用于PostController）：

var CommentsView = Marionette.CompositeView.extend({
    childView: CommentItemView,
    childViewContainer: "#comments_list",

    tagName: 'div',
    id: 'comments',
    template: '<ul id="comments_list"></ul><a href="#" id="goToUser">Go to user 20.</a>',

    ui: {
        userLink: '#goToUser'
    },

    events:{
        "click @ui.userLink": "goToUser"
    },

    goToUser: function(e){
        e.preventDefault();
        app.testRouter.triggerMethod('user:show', 20);
    }
});

这些是Backbone Debugger的结果：

1）在帖子页面上打开应用程序：

查看：