Backbone.js aracını kullanarak, iç içe geçmiş modelleri ile karşılaştığım sorunu göstermek için hızlı bir test edin.backbone.js modelleri
Önsöz İki iç içe model, Obj1 ve Obj2 içeren bir Obj Modeline sahibim. Obj modelinin kendisi bir Görünümü (ObjView) vardır ve ana sayfanın kendisi için bir Görünüm vardır (BodyView).
Ana sayfada tek bir düğme vardır, id = ekleyin. Düğmeye her tıklandığında ObjCollection'a yeni bir Obj eklenir ve ObjView sayfaya bir düğme (id = clickMe) ekler. ClickMe düğmesi, bu.model ve this.model.get ("obj1") konsol.loglarını içeren bir testFunc'e bağlanır.
Sorun console.logs teftiş itibaren , görüyorum her Obj yeni örneği ise, bir obj1 aynı örneğine onların iç içe Obj1 noktası! Ancak Obj'nin her örneğinin, iç içe geçmiş modeller obj1 ve obj2'nin kendi örneklerine sahip olması gerektiği açıktır.
Herhangi bir yardım için teşekkür ederiz.
$(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 sayfası sadece jQuery ve omurga yüklü ile takip ediyor.
<body>
<input type ="button" id="add" value="Add">
</body>
Açık bir açıklama için teşekkürler. – fortuneRice
niçin 'this.set (myDefaults)' yerine '$(). Uzatın (...)'? Dahili olarak aynı şeyi yapıyor ve aynı etkiye sahip olacak, ama setin daha temiz olduğunu düşünüyorum. – idbentley
@idbentley oh Sanırım bunu yapabilirsin! Bunu düşünmemiştim, ama evet, daha temiz olurdu. Değişim olayını set kullanarak tetiklersiniz, ancak sessiz seçeneği kullanabilirsiniz, bu yüzden gerçekten önemli değil. – c3rin