backbone.js模型指向嵌套模型的相同實例

使用backbone.js，這裏是一個快速測試，用於演示我面臨的問題嵌套模型。backbone.js模型指向嵌套模型的相同實例

前言我有一個包含2個嵌套模型，OBJ1和OBJ2一個的OBJ模型。 Obj模型本身有一個View（ObjView），並且主頁面本身有一個View（BodyView）。

主頁面有一個按鈕，id = add。每次按鈕被點擊時，一個新的Obj被添加到ObjCollection中，並且ObjView將一個按鈕（id = clickMe）添加到頁面中。 clickMe按鈕綁定到一個test.Func，它的console.logs this.model和this.model.get（「obj1」）。

問題從檢查console.logs，我看到，雖然每個obj是一個新的實例，其嵌套OBJ1點到OBJ1的同一個實例！但是Obj的每個實例顯然都應該有自己的嵌套模型obj1和obj2的實例。

任何幫助表示讚賞。

$(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('<input type ="button" id="clickMe" value="Click">') 
      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; 

});

HTML頁面中只是使用jQuery和骨幹加載以下。

<body> 
    <input type ="button" id="add" value="Add"> 
</body>

來源

2011-06-15 fortuneRice

fortuneRice，當Backbone模型被初始化時，super.constructor將默認值移動到內部屬性數組，其中model.get查找「obj1」。 Prusse的示例使用每個實例的新對象初始化obj1和obj2值，但不會將值移至內部屬性數組。這是我對Prusse解決方案的修改。

var Obj = Backbone.Model.extend({ 
    initialize: function() { 
     myDefaults = { 
      obj1: new Obj1(); 
      obj2: new Obj2(); 
     } 
     this.set(myDefaults); 
});

jQuery的擴展方法將結合這兩個對象。您可以在initialize方法中聲明具有默認值的非對象引用和帶有myDefaults的對象引用。

來源

2011-06-15 21:14:36 c3rin

感謝您的明確解釋。 – fortuneRice 2011-06-15 22:04:47

爲什麼不使用'this.set（myDefaults）'而不是'$（）。extend（...）'？在內部它做同樣的事情，並會有相同的效果，但我相信使用set是更清潔。 – idbentley 2011-06-16 00:30:28

@idbentley哦，我想你可以做到這一點！沒有想到它，但是，它會更乾淨。你可以使用set觸發change事件，但是你可以使用silent選項，所以我想這真的沒有關係。 – c3rin 2011-06-30 19:58:51

有了：

var Obj = Backbone.Model.extend({ 
    defaults: { 
     obj1 : new Obj1(), 
     obj2 : new Obj2() 
    } 
})

你是說你想與「目標文件」創建的所有對象具有相同的「OBJ1」和「obj2的」值，使用：

var Obj = Backbone.Model.extend({ 
    initialize: function() { 
     this.obj1 = new Obj1(); 
     this.obj2 = new Obj2(); 
    } 
});

爲了實現你所期望的。 http://documentcloud.github.com/backbone/#Model-constructor

來源

2011-06-15 18:14:39 Prusse

感謝您的幫助，但我不知道爲什麼'this.model.get（「obj1」）'現在給我'undefined'？我認爲它會默認返回Obj1的一個實例。有任何想法嗎？ – fortuneRice 2011-06-15 21:00:35

@fortuneRice嘗試'this.get（「obj1」）'，obj1不是「類」Obj的屬性，而是Obj實例的屬性。 – Prusse 2011-06-15 21:16:53

感謝您的跟進;我根據關於內部屬性數組的說明接受了c3rin的解決方案。 – fortuneRice 2011-06-15 22:06:50

backbone.js模型指向嵌套模型的相同實例

回答

相關問題