title: backbone.js models pointing to same instance of nested model
body: <p>Using backbone.js, here is a quick test to demonstrate the problem I am facing with <strong>nested models</strong>.</p>
  
  <p><strong>Preface</strong>
  I have a Obj Model that contains 2 nested models, Obj1 and Obj2. The Obj model itself has a View (ObjView), and there is a View for the main page itself (BodyView).</p>
  
  <p>The main page has a single button, id=add. Each time the button is clicked, a new Obj is added to the ObjCollection, and the ObjView adds a button (id=clickMe) to the page. The clickMe button is bound to a testFunc that console.logs this.model and this.model.get("obj1"). </p>
  
  <p><strong>Problem</strong>
  From inspecting the console.logs, I see that while each Obj is a new instance, their nested Obj1 point to the same instance of an obj1! But each instance of Obj is obviously supposed to have their own instances of the nested models obj1 and obj2. </p>
  
  <p>Any help appreciated.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
  
      var Obj1 = Backbone.Model.extend({
          defaults:{
              Attr1A   : false,
              Attr1B   : false
          }
      })
  
      var Obj2 = Backbone.Model.extend({
          defaults:{
              Attr2A   : false,
              Attr2B   : false
          }
      })
  
      var Obj = Backbone.Model.extend({
          defaults: {
              obj1    : new Obj1(),
              obj2    : new Obj2()
          }
      })
  
      var ObjCollection = Backbone.Collection.extend({
          model: Obj
      });
  
  
      var ObjView = Backbone.View.extend({
  
          initialize: function(){
              _.bindAll(this, 'render', 'testFunc');
              this.model.bind('change', this.render);
              this.model.view = this;
  
              $("body").append(this.render().el);
          },
  
          events: {
              "click #clickMe" : "testFunc"
          },
  
          render: function(){
              $(this.el).html('&lt;input type ="button" id="clickMe" value="Click"&gt;')
              return this;
          },
  
          testFunc: function(){
              console.log(this.model); //returns Obj models with unique cids
              console.log(this.model.get("obj1")); //returns Obj1 models with the SAME cid!
          }
      });
  
  
      var BodyView = Backbone.View.extend({
          el: $('body'),
  
          events:{
              "click #add"  : "addObj"
          },
  
          initialize: function(){
              _.bindAll(this, 'render', 'addObj')
              this.collection = new ObjCollection();
              this.collection.bind('add', this.appendObj); 
          },
  
          addObj: function(){
              var myObj = new Obj();
              this.collection.add(myObj);
          },
  
          appendObj: function(myObj){
              var objView = new ObjView({
                  model: myObj
              });
          }
      });
      var bodyView = new BodyView;
  
  });
  </code></pre>
  
  <p>The html page is just the following with jQuery and backbone loaded.</p>
  
  <pre><code>&lt;body&gt;
      &lt;input type ="button" id="add" value="Add"&gt;
  &lt;/body&gt;
  </code></pre>