title: backbone - trying to rerender a view with the next or previous model in a collection
body: <p>I am trying to get into backbone and have the following which is an attempt at doing an image gallery. I am trying to use render with a model in a collection. I will show the first element of the collection but I would like to add support for simply rerendering with the next element but I don't know how to do this .</p>
  
  <p>I have implemented next and previous on my model like the following:</p>
  
  <pre><code>arc.Item = Backbone.Model.extend({
      next: function () {
          if (this.collection) {
              return this.collection.at(this.collection.indexOf(this) + 1);
          }
      },previous: function () {
          if (this.collection) {
              return this.collection.at(this.collection.indexOf(this) - 1);
          }
      }
  });
  </code></pre>
  
  <p>The problem here (there could be more than the one I am asking about though) is in the loadNext method. How would I get the current location in this collection and to increment it?</p>
  
  <pre><code>arc.ItemsGalleryView = Backbone.View.extend({
        el: $('#mig-container'),
      events: {'click .next-btn' : 'loadNext', 
               'click .previous-btn':'loadPrevious' },
         template:_.template($('#mig-image-tmp').text()),
        initialize: function() {
            _.bindAll( this, 'render' );
            // render the initial state
            var thisModel=this.collection.first();
            this.render(thisModel);
        },
  
        render: function(xModel) {  // &lt;- is it ok to do it this way?
            var compiled=this.template(xModel.toJSON());
            this.$el.html(compiled);
            return this;
        },
  
        loadNext: function(){
          console.log('i want to load Next');
          this.render(this.collection.next());  // &lt;- how would I do this
          this.render(this.collection.first().next());  // &lt;- this works by always giving me the second.
          // I need to replace first with current
  
        },
        loadPrevious: function(){
          console.log('i want to load Previous');
        }
  </code></pre>
  
  <p>Or is there a better way to implement this? </p>
  
  <p>thx in advance</p>
  
  <p><strong>edit #1</strong> </p>
  
  <pre><code> arc.ItemsGalleryView = Backbone.View.extend({
          el: $('#mig-container'),
          events: {'click .next-btn' : 'loadNext', 'click .previous-btn':'loadPrevious' },
           template:_.template($('#mig-image-tmp').text()),
          initialize: function() {
            _.bindAll( this, 'render' );
            this.render(this.collection.first());  // &lt;- this works correct
          },
  
          render: function(xModel) {
            console.log(xModel.toJSON());
            var compiled=this.template(xModel.toJSON());
            this.$el.html(compiled);
            return this;
          },
          loadNext: function(){
            console.log('i want to load next');
            this.render(this.collection.next());   // &lt;- this doesn't seem to do anything, event is called correctly but doesn't seem to move to next element
          },
  
      However if I adjust to this, it will load the 3rd element of the array
  
  loadNext: function(){
    console.log('i want to load Previous');
    this.render(this.collection.at(2));
  },
  </code></pre>
  
  <p>How would I use this.collection.next() to get this behavior? </p>
  
  <p>thx</p>