Eventi personalizzati Backbone

Question

Diciamo che ho due visualizzazioni (paginationview e postsview) e una collezione (postscollection). Ogni volta che si fa clic sul pulsante .next nella visualizzazione di paginazione, sto chiamando la funzione successiva nella raccolta di post e la raccolta di post sta recuperando i post della nuova pagina dal server (il codice è semplificato). Ora nella mia vista del post, voglio solo visualizzare i post che sono nell'ultima pagina. Non voglio associare la mia vista all'evento "aggiungi" nella raccolta perché ci sono più casi in cui qualcosa viene "aggiunto" alla raccolta. Voglio che la mia funzione 'lista di rendering' nel mio postview sia chiamata solo quando viene chiamata la funzione 'nextPage' nella mia raccolta di post. Come collego questi alle funzioni insieme?

// paginationview

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

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

// raccolta

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

È possibile utilizzare il proprio evento per questo scopo.

In Collection.nextPage il fuoco dell'evento:

this.trigger('nextpage'); 

e in vista nel metodo initiazlie si associa la funzione a questo evento:

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

E Inoltre, non dimenticare di legare contesto della lista di rendering a questo (sempre in modalità di visualizzazione iniziale):

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