2013-07-10 30 views
10

Załóżmy, że mam dwa widoki (widok paginacji i postview) i kolekcję (postscollection). Po kliknięciu przycisku .next w widoku paginacji wywołuję następną funkcję w postscollection, a kolekcja postu pobiera posty z nowej strony z serwera (kod jest uproszczony). Teraz w widoku wpisu chcę wyświetlać tylko posty znajdujące się na ostatniej stronie. Nie chcę powiązać mojego widoku z wydarzeniem "dodaj" w kolekcji, ponieważ jest więcej przypadków, że coś jest "dodane" do kolekcji. Chcę, aby moja funkcja "lista odtwarzania" w moim widoku postów była wywoływana tylko wtedy, gdy wywoływana jest funkcja "nextPage" w moim postscollection. Jak połączyć te funkcje ze sobą?Niestandardowe zdarzenia kręgosłupa

// paginationview

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

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

// zbiór

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); 
    }, 
}); 

Odpowiedz

13

Można użyć własnego wydarzenie do tego celu.

W Collection.nextPage ogień zdarzenie:

this.trigger('nextpage'); 

iw widoku w metodzie initiazlie powiązać swoją funkcję do tego wydarzenia:

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

A także nie zapomnij, aby związać kontekst listy odtwarzania do tego (ponownie w inicjalizacji metoda widzenia):

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

Jest to prawdopodobnie dobry pomysł, aby pamiętać, że 'this.tr igger ('nextpage'); 'prawdopodobnie powinno się zdarzyć w module obsługi sukcesu do pobrania. –

+0

co masz na myśli przez tego andrew? czy powinno się to zdarzyć tylko, jeśli pobieranie zakończy się sukcesem? w przeciwnym razie lista renderowanych może zostać wywołana przed pobraniem? –

+0

Tak, Andrew ma rację. Powinniśmy poczekać, aż pobieranie dobiegnie końca. Możemy więc uruchomić zdarzenie po osiągnięciu sukcesu. –