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模型指向嵌套模型的相同实例

回答

相关问题