[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に変えてもできる