Backbone.js的模型指向嵌套模式相同的实例 [英] backbone.js models pointing to same instance of nested model
问题描述
使用Backbone.js的，这里是一个快速测试来证明我是嵌套模型
面临的问题 preface
我有一个包含2嵌套模型，OBJ1和OBJ2一个的OBJ模型。 obj的模型本身有一个View（ObjView），并有针对的主要页面本身（BodyView）视图。
主页上有一个按钮，ID =补充。每个按钮被点击时，一个新的OBJ加到ObjCollection和ObjView添加一个按钮（ID = clickMe）到页。该clickMe按钮被绑定到一个testFunc该console.logs this.model和this.model.get（OBJ1）。
问题
从检查console.logs，我看到，虽然每个obj是一个新的实例，其嵌套OBJ1点到OBJ1的同一个实例！但是obj的每个实例，显然应该有自己的嵌套模式OBJ1和OBJ2的实例。
任何帮助AP preciated。
$（文件）。就绪（函数（）{ VAR OBJ1 = Backbone.Model.extend（{
默认值：{
Attr1A：假的，
Attr1B：假的
}
}） VAR OBJ2 = Backbone.Model.extend（{
默认值：{
Attr2A：假的，
Attr2B：假的
}
}） 无功的OBJ = Backbone.Model.extend（{
默认值：{
OBJ1：新OBJ1（）
OBJ2：新OBJ2（）
}
}） VAR ObjCollection = Backbone.Collection.extend（{
型号：的OBJ
}）;
VAR ObjView = Backbone.View.extend（{ 初始化：功能（）{
_.bindAll（在此，呈现，testFunc'）;
this.model.bind（'变'，this.render）;
this.model.view =这一点; $（机构）追加（this.render（）EL）。
}， 事件：{
点击#clickMe：testFunc
}， 渲染：功能（）{
$（this.el）的.html（'＆LT;输入类型=按钮ID =clickMe值=点击＆GT;'）
返回此;
}， testFunc：功能（）{
的console.log（this.model）; //返回的OBJ车型具有独特的CID
的console.log（this.model.get（OBJ1））; //返回OBJ1车型一样CID！
}
}）;
VAR BodyView = Backbone.View.extend（{
EL：$（'身体'）， 事件：{
点击＃将：addObj
}， 初始化：功能（）{
_.bindAll（这一点，渲染，addObj'）
this.collection =新ObjCollection（）;
this.collection.bind（添加，this.appendObj）;
}， addObj：功能（）{
VAR MyObj中=新的OBJ（）;
this.collection.add（MyObj中）;
}， appendObj：功能（MyObj中）{
VAR objView =新ObjView（{
型号：MyObj中
}）;
}
}）;
VAR bodyView =新BodyView;}）;
HTML页面只使用jQuery和骨干遵循加载。
＆LT;身体GT;
＆LT;输入类型=按钮ID =添加VALUE =添加＆GT;
＆LT; /身体GT;
fortuneRice，当骨干模式被初始化，super.constructor移动默认为内部属性数组，其中model.get查找OBJ1。 Prusse的例子初始化与每个实例的新对象OBJ1和OBJ2的值，但不移动的值到内部属性阵列。这里是我的Prusse的解决方案进行修改。
无功的OBJ = Backbone.Model.extend（{
初始化：功能（）{
myDefaults = {
OBJ1：新OBJ1（）;
OBJ2：新OBJ2（）;
}
this.set（myDefaults）;
}）;
jQuery的扩展方法将两个对象结合起来。你可以在初始化方法声明为默认和非对象引用与myDefaults对象的引用。
Using backbone.js, here is a quick test to demonstrate the problem I am facing with nested models.
Preface 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).
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").
Problem 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.
Any help appreciated.
$(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;
});
The html page is just the following with jQuery and backbone loaded.
<body>
<input type ="button" id="add" value="Add">
</body>
fortuneRice, when a Backbone model gets initialized, the super.constructor moves the defaults to the internal attributes array, where model.get looks for "obj1". Prusse's example initializes the obj1 and obj2 values with new objects for each instance, but doesn't move the values to the internal attributes array. Here is my modification of Prusse's solution.
var Obj = Backbone.Model.extend({
initialize: function() {
myDefaults = {
obj1: new Obj1();
obj2: new Obj2();
}
this.set(myDefaults);
});
jQuery's extend method would combine the two objects. You could declare the non-object references with defaults and the object references with myDefaults in the initialize method.
这篇关于Backbone.js的模型指向嵌套模式相同的实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
