title: Backbone.js Adding Model to Collection Issue
body: <p>I am building a test application in Backbone.js (my first app using Backbone). The app goes like this:</p>
  
  <ol>
  <li>Load Data from server "Plans"</li>
  <li>Build list of plans and show to screen</li>
  <li>There is a button to add a new plan</li>
  <li>Once new plan is added, add to collection ( do not save to server as of now )</li>
  <li>redirect to index page and show the new collection ( includes the plan you just added)</li>
  </ol>
  
  <p>My issue is with item 5. When I save a plan, I add the model to the collection then redirect to the initial view. At this point, I fetch data from the server. When I fetch data from the server, this overwrites my collection and my added model is gone. </p>
  
  <p>How can I prevent this from happening? I have found a way to do this but it is definitely not the correct way at all. Below you will find my code examples for this. Thanks for the help. </p>
  
  <p>PlansListView View: </p>
  
  <pre><code>var PlansListView = Backbone.View.extend({
  
      tagName : 'ul',
  
      initialize : function()
      {
          _.bindAll( this, 'render', 'close' );
          //reset the view if the collection is reset 
          this.collection.bind( 'reset', this.render , this );
  
      },
      render : function()
      {
          _.each( this.collection.models, function( plan ){
  
              $( this.el ).append( new PlansListItemView({ model: plan }).render().el );
  
          }, this );
  
          return this;
      },
      close : function()
      {
          $( this.el ).unbind();
          $( this.el ).remove();  
  
      }   
  });//end
  </code></pre>
  
  <p>NewPlanView Save Method</p>
  
  <pre><code>var NewPlanView = Backbone.View.extend({
  
      tagName : 'section',
      template : _.template( $( '#plan-form-template' ).html() ),
      events : {
          'click button.save' : 'savePlan',
          'click button.cancel' : 'cancel'
  
      },
      intialize: function()
      {
          _.bindAll( this, 'render', 'save', 'cancel' );  
  
      },
      render : function()
      {
          $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) );                                    
          return this;
      },
      savePlan : function( event )
      {
  
          this.model.set({
  
              name : 'bad plan',
              date : 'friday',
              desc : 'blah',
              id : Math.floor(Math.random()*11),
              total_stops : '2'           
          });
  
          this.collection.add( this.model );
  
          app.navigate('', true );
          event.preventDefault();
  
      },
      cancel : function(){}
  });
  </code></pre>
  
  <p>Router (default method): </p>
  
  <pre><code>    index : function()
      {
          this.container.empty();
          var self = this;
  
          //This is a hack to get this to work
          //on default page load fetch all plans from the server
          //if the page has loaded ( this.plans is defined) set the updated plans collection to the view
          //There has to be a better way!!
          if( ! this.plans )
          {
              this.plans = new Plans();
  
  
              this.plans.fetch({
  
                  success: function()
                  {
                      self.plansListView = new PlansListView({ collection : self.plans });
                      $( '#container' ).append( self.plansListView.render().el );
                      if( self.requestedID ) self.planDetails( self.requestedID );
                  }   
              });
          }
          else
          {
              this.plansListView = new PlansListView({ collection : this.plans });
              $( '#container' ).append( self.plansListView.render().el );
              if( this.requestedID ) self.planDetails( this.requestedID );
  
          }
      },
  </code></pre>
  
  <p>New Plan Route:</p>
  
  <pre><code>    newPlan : function()
      {   var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'});
          this.newPlan = new NewPlanView({ model : plan, collection: this.plans });
          this.newPlan.render();
      }   
  </code></pre>
  
  <p>FULL CODE
      ( function( $ ){</p>
  
  <pre><code>var Plan = Backbone.Model.extend({
  
      defaults: {
          name : '',
          date : '',
          desc : ''   
      }   
  });
  
  var Plans = Backbone.Collection.extend({
  
      model : Plan,
      url : '/data/'  
  
  });     
  
  
  
  
  
  
  $( document ).ready(function( e ){
  
      var PlansListView = Backbone.View.extend({
  
          tagName : 'ul',
  
          initialize : function()
          {
              _.bindAll( this, 'render', 'close' );
              //reset the view if the collection is reset 
              this.collection.bind( 'reset', this.render , this );
  
          },
          render : function()
          {
              _.each( this.collection.models, function( plan ){
  
                  $( this.el ).append( new PlansListItemView({ model: plan }).render().el );
  
              }, this );
  
              return this;
          },
          close : function()
          {
              $( this.el ).unbind();
              $( this.el ).remove();  
  
          }   
      });//end
  
      var PlansListItemView = Backbone.View.extend({
  
          tagName : 'li',
          template : _.template( $( '#list-item-template' ).html() ),
          events :{
  
              'click a' : 'listInfo'  
          },
          render : function()
          {
              $( this.el ).html( this.template( this.model.toJSON() ) );
              return this;            
          },
          listInfo : function( event )
          {
  
  
          }
  
      });//end
  
  
      var PlanView = Backbone.View.extend({
  
          tagName : 'section',
          events : {
              'click button.add-plan' : 'newPlan'
          },
          template: _.template( $( '#plan-template' ).html() ),
          initialize: function()
          {
              _.bindAll( this, 'render', 'close', 'newPlan' );            
          },
          render : function()
          {
              $( '#container' ).append( $( this.el ).html( this.template( this.model.toJSON() ) ) );
              return this;
          },
          newPlan : function( event )
          {
              app.navigate( 'newplan', true );
          },
          close : function()
          {
              $( this.el ).unbind();
              $( this.el ).remove();  
          }   
  
      });//end
  
  
      var NewPlanView = Backbone.View.extend({
  
          tagName : 'section',
          template : _.template( $( '#plan-form-template' ).html() ),
          events : {
              'click button.save' : 'savePlan',
              'click button.cancel' : 'cancel'
  
          },
          intialize: function()
          {
              _.bindAll( this, 'render', 'save', 'cancel' );  
  
          },
          render : function()
          {
              $( '#container' ).append( $( this.el ).html(this.template( this.model.toJSON() )) );                                    
              return this;
          },
          savePlan : function( event )
          {
  
              this.model.set({
  
                  name : 'bad plan',
                  date : 'friday',
                  desc : 'blah',
                  id : Math.floor(Math.random()*11),
                  total_stops : '2'           
              });
  
              this.collection.add( this.model );
  
              app.navigate('', true );
              event.preventDefault();
  
          },
          cancel : function(){}
      });
  
  
  
      var AppRouter = Backbone.Router.extend({
  
          container : $( '#container' ),
  
          routes : {
  
              ''              : 'index',
              'viewplan/:id'  : 'planDetails',
              'newplan'           : 'newPlan'
          },
          initialize: function(){
  
          },
          index : function()
          {
              this.container.empty();
              var self = this;
  
              //This is a hack to get this to work
              //on default page load fetch all plans from the server
              //if the page has loaded ( this.plans is defined) set the updated plans collection to the view
              //There has to be a better way!!
              if( ! this.plans )
              {
                  this.plans = new Plans();
  
  
                  this.plans.fetch({
  
                      success: function()
                      {
                          self.plansListView = new PlansListView({ collection : self.plans });
                          $( '#container' ).append( self.plansListView.render().el );
                          if( self.requestedID ) self.planDetails( self.requestedID );
                      }   
                  });
              }
              else
              {
                  this.plansListView = new PlansListView({ collection : this.plans });
                  $( '#container' ).append( self.plansListView.render().el );
                  if( this.requestedID ) self.planDetails( this.requestedID );
  
              }
          },
  
          planDetails : function( id )
          {
  
              if( this.plans )
              {
                  this.plansListView.close();
                  this.plan = this.plans.get( id );
  
                  if( this.planView ) this.planView.close();
                      this.planView = new PlanView({ model : this.plan });
                  this.planView.render();
              }
              else{
  
                  this.requestedID = id;
                  this.index();
              }
  
              if( ! this.plans ) this.index();
          },
  
          newPlan : function()
          {   var plan = new Plan({name: 'Cool Plan', date: 'Monday', desc: 'This is a great app'});
              this.newPlan = new NewPlanView({ model : plan, collection: this.plans });
              this.newPlan.render();
          }   
      });
  
  
  
      var app = new AppRouter();
      Backbone.history.start();
  
  }); 
  
  
  
  
  
  
  
  
  })( jQuery );
  </code></pre>