backbone.js - Marionette not clearing models and collection on destroy() -
i'm looking @ moving vanilla backbone marionette and, backbone, first concern make sure don't have memory leaks since i'm building 1 page application.
using backbone debugger, can see when change view displayed in layoutview region, html indeed destroyed model and/or collection remain in memory forever.
first, here's postcontroller code:
var postcontroller = marionette.object.extend({ showone: function(post_cd){ // layoutview var postview = new postview(); // create data containers var comments = new comments(); // backbone.collection var post = new post(); // backbone.model // create subviews (compositeview) var commentsview = new commentsview({collection: comments, model: post}); // render compositeview in layoutview when displaying layoutview postview.on('before:show', function(region, view, options){ this.showchildview('comments', commentsview); }); // data init. post.fetch(); comments.fetch(); // show view on main region. // app.layout layoutview binded <body> app.layout.showchildview('main', postview); } }); next up, usercontroller code:
var usercontroller = marionette.object.extend({ showone: function(usercd){ var user = new user({user_cd: usercd}); // marionette.itemview var useritemview = new useritemview({model: user}); // fetch user user.fetch(); // show view on main region app.layout.showchildview('main', useritemview); } }); pretty simple, create model/collection , associated view , switch them around in "main" region.
here simple views:
first, useritemview (used in usercontroller):
var useritemview = marionette.itemview.extend({ tagname: 'div', template: "<a href='#post/48' id='gotopost'>go post 48.</a>", events:{ "click #gotopost": "gotopost", }, gotopost: function(e){ e.preventdefault(); app.testrouter.triggermethod('post:show', 48); } }); my compositeview "commentsview" (used in 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 user 20.</a>', ui: { userlink: '#gotouser' }, events:{ "click @ui.userlink": "gotouser" }, gotouser: function(e){ e.preventdefault(); app.testrouter.triggermethod('user:show', 20); } }); those results backbone debugger:
1) opening app on posts page:
views: 
models: 
as expected, 3 models. 1 post (model) , 2 comments (collection).
collections: 
2) navigating "user" page:
views: 
the old views correctly removed , new 1 added.
models: 
my 3 old models still present! along new one.
collections:
even though page doesn't use collection, old 1 post page still here.
am missing ? supposed manually clear in ondestroy() ? if so, how ? tried delete , setting null, none of worked.
i checked memory differences using heap snapshots after clicking between page while, indeed goes infinitely.
thanks.
as turns out, being trolled backbone debugger, seems keep instances alive can continue monitoring/checking them out. marionette explorer has same flaw.
i disabled both of them , went hunting backbone objects in heap profiles , found it's behaving should.
for same issue, find backbone objects in heap profiles, don't search "backbone", "model" or whatever, search "child". backbone objects under "child", because of how controller works.
Comments
Post a Comment