如何在骨架集合中跟蹤實際呈現的模型

Question

我是Backbone的新手，我試圖創建一個簡單的幻燈片，顯示集合中的所有模型。

模型可通過從服務器取一個創建這裏是代碼：

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

在PostCollection這兒有modelBefore和modelAfter分別返回下一個和以前的型號。

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

我已經創建了一個名爲SlideShowView認爲，從模板創建依賴於瀏覽後認爲：next和prev方法處理渲染一個或下一個模板。

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

最後，帖子瀏覽：

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

問題出現時，我按下下一首或上一個，在實踐中這是因爲如果集合不是用最新的渲染元素更新，我必須找到一個告訴收集什麼是當前收集元素的方式。

小貼士？

感謝

Answer 1

現在你的代碼中使用SlideShowView作爲this.model「當前模型」。但是，您不更新它。像這樣的事情會做到這一點：

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

類似的prev。