title: Alternating between 2 different templates in backbone.js
body: <p>I have 2 different templates for my model's views. Each time the models are fetched from the database, the first 3 models (#1, 2, 3) fetched from the backend will have the view created using the first template, the next 4 models (#4, 5, 6, 7) will use the second template, the next 3 models (#8, 9, 10) will use the first template and so on.</p>
  
  <p><strong>Problem:</strong> How will I introduce this alternating template using backbone.js?</p>
  
  <p><strong>JS Code</strong></p>
  
  <pre><code>// Views
  
  PhotoListView = Backbone.View.extend({
      el: '#photo_list',
  
      render: function() {
          $(this.el).html('');
          _.each(this.model.models, function(photo) {
              $(this.el).append(new PhotoListItemView({ model: photo }).render().el);
          }, this);
          return this;
      }
  });
  
  PhotoListItemView = Backbone.View.extend({
      tagNAme: 'div',
      className: 'photo_box',
  
      template: _.template( $('#tpl_PhotoListView').html() ),
  
      initialize: function() {
          this.model.bind('destroy', this.close, this);
      },
  
      render: function() {
          $(this.el).html( this.template( this.model.toJSON() ) );
          return this;
      },
  
      close: function() {
          this.unbind();
          this.remove();
      }
  });
  </code></pre>