木偶不清除destroy()上的模型和集合

backbone.js memory-leaks marionette

376 观看

1回复

515 作者的声誉

我正在考虑从香草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); 
    }
});

很简单,我只是创建一个模型/集合和一个关联的视图,然后在我的“主要”区域中切换它们。

这是我非常简单的观点:

首先,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);
    }
});

我的CompositeView“ CommentsView”(用于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);
    }
});

这些是主干调试器的结果:

1)在“帖子”页面上打开应用程序:

观看次数: 意见1

楷模: 在此处输入图片说明

不出所料,有3种型号。1个帖子(模型)和2条评论(集合)。

集合: 在此处输入图片说明

2)导航到我的“用户”页面:

观看次数: 在此处输入图片说明

正确删除了旧视图,并添加了新视图。

楷模: 在此处输入图片说明

我的3个旧模型仍然存在!和我的新人一起。

集合: 在此处输入图片说明

即使此页面不使用任何集合,“发布”页面中的旧集合仍在此处。

我想念什么吗?我应该手动清除onDestroy()中的那些吗?如果是这样,怎么办?我尝试删除并将其设置为null,但是这些都不起作用。

在页面之间单击一段时间后,我还使用堆快照检查了内存差异,它确实无限增加。

谢谢。

作者: Growiel 的来源 发布者: 2016 年 1 月 21 日

回应 (1)


0

515 作者的声誉

事实证明,Backbone调试器正在引导我,它似乎可以使实例保持活动状态,因此您可以继续监视/检出它们。木偶资源管理器具有相同的缺陷。

我禁用了这两个对象,然后在“堆”配置文件中寻找我的主干对象,发现它的行为正常。

对于那些有相同问题的人,要在堆概要文件中查找主干对象,请不要搜索“主干”,“模型”或任何其他内容,而要搜索“子”。由于控制器的工作方式,所有主干对象都在“子”下。

作者: Growiel 发布者: 21.01.2016 07:26
32x32