[Backbone.js] イベント関連で起きやすいメモリリーク

Backbone.jsを使っていて起きやすい問題ってのを紹介してくれている記事があった。 その中で、頻繁に起きてしまいそうなメモリリークの問題。 onを使ってview側でmodelのchangeイベントをbindしていると、viewを削除した後でもイベント経由でmodelからviewへの参照が残ってしまうらしく、メモリが解放されない。

view plainprint?

1. var MyView = Backbone.View.extend({  
2.     initialize: function(){  
3.         this.model.on('change', this.render, this);  
4.     },  
5.     render: function(){  
6.         //render処理  
7.     }  
8. });  

var MyView = Backbone.View.extend({
	initialize: function(){
		this.model.on('change', this.render, this);
	},
	render: function(){
		//render処理
	}
});

viewをremoveした際に自動で参照を解除するにはonではなくlistenToに変更するとよい。

view plainprint?

1. initialize: function() {  
2.     this.listenTo(this.model, 'change', this.render);  
3. }  

initialize: function() {
	this.listenTo(this.model, 'change', this.render);
}

違いはイベントをひもづけているのがmodel->viewからview->modelへ変わったこと。 なのでviewを削除すればview->modelへの参照も自動でなくなり、メモリも解放される。 参考Avoiding Common Backbone.js Pitfalls

[Backbone.js] 自分で作ったイベントをViewとCollection(またはModel)で連携させたい

「次を読む」ボタンを押すとAJAXで次のリスト一覧を取得する。 アンド、取得し終わったらさらに次のページがあるのかどうかチェックして、なかったら「次を読む」ボタンを非表示にするってのをやった。 まずはCollection側で独自イベント登録

view plainprint?

1. var MyList = Backbone.Collection.extend({  
2.  initialize: function(){  
3.   //自分独自のイベントフックを登録  
4.   this.on('nothingNext', this.myEvent)  
5.  },  
6.  load: function(){  
7.   //何かを読み込む処理  
8.   if(次のページがなかったら){  
9.    //自分で作ったイベントを起動  
10.    this.trigger('nothingNext');  
11.   }  
12.  },  
13.  myEvent: function(){  
14.   console.log('俺独自のイベントだ');  
15.  }  
16. });  
17. var mylist = new MyList();  

var MyList = Backbone.Collection.extend({
 initialize: function(){
  //自分独自のイベントフックを登録
  this.on('nothingNext', this.myEvent)
 },
 load: function(){
  //何かを読み込む処理
  if(次のページがなかったら){
   //自分で作ったイベントを起動
   this.trigger('nothingNext');
  }
 },
 myEvent: function(){
  console.log('俺独自のイベントだ');
 }
});
var mylist = new MyList();

Viewも独自イベントに連動させる

view plainprint?

1. var Btn = Backbon.View.extend({  
2.  collection: MyList,  
3.  initialize: function(){  
4.   //collectionの独自イベントが起動した時に一緒に動かしたいメソッドを登録  
5.   this.collection.on('nothingNext', hideMe);  
6.  },  
7.  hideMe: function(){  
8.   this.$el.hide();  
9.  }  
10. });  

var Btn = Backbon.View.extend({
 collection: MyList,
 initialize: function(){
  //collectionの独自イベントが起動した時に一緒に動かしたいメソッドを登録
  this.collection.on('nothingNext', hideMe);
 },
 hideMe: function(){
  this.$el.hide();
 }
});

CollectionをModelに変えてもできる