title: backbone.js: add an element to a collection without re-rendering all the collection
body: <p>I have a view that render itself from a Collection:</p>
  
  <pre><code>render: function() {
  
      $(this.el).html(JST['templates/menu']({collection: this.collection }));
      $('#nav').html(this.el);     
  }
  </code></pre>
  
  <p>In the view initializer, i bind the add event of the collection on the render function of the view:</p>
  
  <pre><code>initialize: function() {
      this.render();
      var self = this;
      this.collection.bind("add", function(event){
          self.render();
      });
  }
  </code></pre>
  
  <p>elsewhere in the application, I add an item to the collection.</p>
  
  <pre><code>bookSubscription_collection.add(model);
  </code></pre>
  
  <p>The problem with that code is, if I add a new item to the collection, then all the items in the collection are re-rendered. </p>
  
  <p>Is there a way to add a new item to a collection without re-render all the other items, but just render the new item?</p>