バックボーンカスタムイベント

Question

私は2つのビュー（paginationviewとpostsview）とコレクション（ポストコレクション）を持っているとしましょう。 paginationviewで.nextボタンをクリックするたびに、私はpostscollectionで次の関数を呼び出しています。ポストコレクションはサーバーから新しいページのポストをフェッチしています（コードは単純化されています）。今私のポストビューでは、私は最後のページにある投稿を表示したい。コレクションに「追加」イベントが発生したケースが増えているため、ビューをコレクションの「追加」イベントにバインドしたくありません。私は自分のpostscollectionで 'nextPage'関数が呼び出されたときにのみ私のpostsview内の私の 'renderlist'関数が呼び出されるようにしたい。これらを関数に一緒に接続するにはどうしたらいいですか？

// paginationview

var PaginationView = Backbone.View.extend({ 
    events:{ 
     'click a.next' : 'next', 
    }, 

    next: function() { 
     this.collection.nextPage(); 
     return false; 
    } 
}); 

//コレクション

var PostsCollection = Backbone.Collection.extend({ 
    model: model, 

    initialize: function() { 
     _.bindAll(this, 'parse', 'url', 'pageInfo', 'nextPage', 'previousPage'); 
     this.page = 1; 
     this.fetch(); 
    }, 

    parse: function(response) { 
     console.log(response); 
     this.page = response.page; 
     this.perPage = response.perPage; 
     this.total = response.total; 
     this.noofpages =response.noofpages; 
     return response.posts; 
    }, 

    url: function() { 
     return '/tweet/' + '?' + $.param({page: this.page}); 
    }, 

    nextPage: function() { 
     console.log("next page is called"); 
     this.page = this.page + 1; 
     this.fetch(); 
    }, 

// postsview

var PostsView = Backbone.View.extend({ 
    events:{ 
     'click #testbutton' : 'test', 
     'click #allbutton' : 'render', 
    }, 

    initialize: function() { 
     this.listenTo(this.collection, 'add', this.addOne); 
    }, 

    render: function() { 
     $(".maincontainer").html(""); 
     this.collection.forEach(this.addOne, this); 
     return this; 
    }, 

    renderlist: function(){ 
     $(".maincontainer").html(""); 
     this.collection.forEach(this.addOne, this); 
    }, 

    addOne: function(post) { 
     var post = new postView({model : post}); 
     post.render(); 
     this.$el.prepend(post.el); 
    }, 
}); 

Answer 1

あなたは、この目的のために独自のイベントを使用することができます。 Collection.nextPageで

あなたがイベントを発生：

this.trigger('nextpage'); 

とinitiazlie方法でビューで、あなたは、このイベントにあなたの関数をバインド：

this.listenTo(this.collection, 'nextpage', this.renderlist); 

もコンテキストをバインドすることを忘れないでくださいレンダリストをこれに戻します（再び初期化の方法で）。

_.bindAll(this, 'render', 'rederlist');