How to keep track of actual rendered Model in a Backbone Collection
<p>I'm new to Backbone and I'm trying to create a simple Slideshow that show all the models in a Collection.</p>

<p>Models are created through a fetch from the server and here is the code: </p>

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

<p>In PostCollection there're modelBefore and modelAfter that return next and previous model respectively.</p>

<pre><code>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 &lt; 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);
  },
});
</code></pre>

<p>I've created a view called SlideShowView that creates the view from a template relying on Post View: next and prev method dealing with rendering the next or previous template.</p>

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

<p>Finally, Post View: </p>

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

<p>Problems arises when I press next or prev, in practice it is as if the collection was not updated with the latest rendered element, I have to find a way to tell to the collection what is the current collection element shown.</p>

<p>Tips?</p>

<p>Thanks</p>