Wie verfolge ich das tatsächlich gerenderte Modell in einer Backbone Collection?

Question

Ich bin neu bei Backbone und versuche eine einfache Slideshow zu erstellen, die alle Modelle in einer Collection anzeigt.

Modelle sind ein Abruf durch vom Server erstellt und hier ist der Code:

var Post = Backbone.Model.extend({ 
    defaults:{ 
    text: "", 
    source: "", 
    image: "", 
    posted_at: "", 
    rendered : false, 
    }, 
}); 

In PostCollection moment gibt es modelBefore und modelAfter die jeweils nächsten bzw. vorherigen Modell zurück.

var PostCollection = Backbone.Collection.extend({ 
    model: Post, 
    url: "https://milkytags.com/api/v1/boards/edcb2c43-1448-4c81-97d5-1c315c8f9589/posts", 

    initialize: function() { 
    this.fetch({ data: $.param({ page: pageCounter, per_page:3}) }); 
    }, 

    parse: function(response) { 
    return response.posts; 
    }, 

    modelBefore: function(model) { 
    index = this.indexOf(model) - 1; 
    if (index < 0) { 
     index = this.length - 1; 
    } 
    return this.at(index); 
    }, 

    modelAfter: function(model) { 
    index = this.indexOf(model) + 1; 
    if (index === this.length) { 
     index = 0; 
    } 
    return this.at(index); 
    }, 
}); 

Ich habe eine Ansicht erstellt namens SlideShowView, die die Ansicht von einer Vorlage auf Beitrag anzeigen Berufung erstellt: nächste und vorherige Methode mit Rendern die nächste oder vorherige Vorlage handelt.

var SlideShowView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'slideshow', 
    events: { 
    'click #close': 'close', 
    'click #next': 'next', 
    'click #prev': 'prev', 
    }, 
    template: _.template($('#slideShowTemplate').html()), 

    initialize: function() { 
    this.render(); 
    }, 

    render: function() { 
    this.$el.html(this.template()); 
    post = new PostView({ model: this.model }); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 

    close: function(){ 
    this.remove(); 
    }, 

    next: function(){ 
    var next = this.model.collection.modelAfter(this.model); 
    post = new PostView({ model: next }); 
    this.$el.html(this.template()); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 

    prev: function(){ 
    var prev= this.model.collection.modelBefore(this.model); 
    post = new PostView({ model: prev }); 
    this.$el.html(this.template()); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 
}); 

Schließlich Beitrag anzeigen:

// The View for single Post 
var PostView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'post', 
    events: { 
    'click' : 'slideShow', 
    }, 
    template: _.template($('#postTemplate').html()), 

    initialize: function() { 
    this.render(); 
    }, 

    render: function() { 
    this.$el.html(this.template(this.model.toJSON_milky())); 
    return this; 
    }, 

    slideShow: function(){ 
    test=new SlideShowView({model: this.model}); 
    $('#milkyContainer').append(test.$el); 
    } 
}); 

Probleme entstehen, wenn ich drücke nächst oder zurück, in der Praxis ist es, als ob die Sammlung nicht mit dem neuesten gerenderte Elemente aktualisiert wurde, ich habe ein finden Möglichkeit, der Sammlung mitzuteilen, welches Element der aktuellen Sammlung angezeigt wird.

Tipps?

Dank

Answer 1

Gerade jetzt ist der Code this.model in SlideShowView als "das aktuelle Modell" verwendet wird. Sie aktualisieren es jedoch nicht. So etwas würde es tun:

next: function(){ 
    var next = this.model.collection.modelAfter(this.model); 
    post = new PostView({ model: next }); 
    this.$el.html(this.template()); 
    this.$el.append(post.el); 
    this.model = next; // <<---- Added this line. 
    return this.$el; 
}, 

Ähnlich für prev.