2011-06-15 19 views
7

का बैकबोन.जेएस का उपयोग करने के लिए इंगित करने वाले मॉडल, नेस्टेड मॉडल के साथ सामना करने वाली समस्या का प्रदर्शन करने के लिए यहां एक त्वरित परीक्षण है।backbone.js मॉडल नेस्टेड मॉडल

प्रस्तावना मैं एक Obj मॉडल है कि 2 नेस्टेड मॉडल, obj1 और obj2 शामिल है। ओबीजे मॉडल में स्वयं एक व्यू (ObjView) है, और मुख्य पृष्ठ के लिए एक दृश्य है (बॉडी व्यू)।

मुख्य पृष्ठ में एक बटन, आईडी = एड है। प्रत्येक बार जब बटन क्लिक किया जाता है, तो ObjCollection में एक नया Obj जोड़ा जाता है, और ObjView पृष्ठ पर एक बटन (id = clickMe) जोड़ता है। क्लिकमे बटन एक testFunc से जुड़ा हुआ है जो console.logs this.model और this.model.get ("obj1") है।

समस्या console.logs निरीक्षण से, मैं देख रहा हूँ कि जब तक प्रत्येक Obj एक नया उदाहरण है, एक obj1 का एक ही उदाहरण के लिए उनके नेस्ट obj1 बिंदु! लेकिन ओबीजे के प्रत्येक उदाहरण को स्पष्ट रूप से नेस्टेड मॉडल 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> 

उत्तर

5

भाग्यराइस, जब एक बैकबोन मॉडल प्रारंभ होता है, तो super.constructor डिफ़ॉल्ट विशेषताएँ सरणी में डिफ़ॉल्ट स्थानांतरित करता है, जहां model.get "obj1" की तलाश करता है। Prusse का उदाहरण प्रत्येक उदाहरण के लिए नई वस्तुओं के साथ obj1 और obj2 मानों को प्रारंभ करता है, लेकिन मानों को आंतरिक विशेषताओं सरणी में स्थानांतरित नहीं करता है। प्रूसे के समाधान का मेरा संशोधन यहां दिया गया है।

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

jQuery की विस्तार विधि दो वस्तुओं को जोड़ती है। आप प्रारंभिक विधि में डिफ़ॉल्ट रूप से गैर-ऑब्जेक्ट संदर्भ और myDefaults के साथ ऑब्जेक्ट संदर्भों की घोषणा कर सकते हैं।

+0

धन्यवाद। – fortuneRice

+0

'$() के बजाय' this.set (myDefaults) 'का उपयोग क्यों न करें। (...)'? आंतरिक रूप से यह वही काम करता है, और इसका एक ही प्रभाव होगा, लेकिन मेरा मानना ​​है कि सेट का उपयोग क्लीनर है। – idbentley

+0

@idbentley ओह मुझे लगता है कि आप ऐसा कर सकते हैं! इसके बारे में भी सोचा नहीं था, लेकिन हाँ, यह क्लीनर होगा। आप सेट का उपयोग करके परिवर्तन ईवेंट ट्रिगर करेंगे, लेकिन आप चुप विकल्प का उपयोग कर सकते हैं, इसलिए मुझे लगता है कि वास्तव में कोई फर्क नहीं पड़ता। – c3rin

3

के साथ:

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

आप कह रहे हैं कि आप "Obj" के साथ बनाया सभी वस्तुओं एक ही "obj1" और "obj2" मूल्यों, उपयोग करना चाहते हैं:

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

जो आपने देखा है उसे प्राप्त करने के लिए। http://documentcloud.github.com/backbone/#Model-constructor

+0

सहायता के लिए धन्यवाद, लेकिन मुझे यकीन नहीं है कि क्यों 'this.model.get ("obj1") 'अब मुझे' अपरिभाषित 'क्यों देता है? मैंने सोचा कि यह Obj1 के एक उदाहरण को वापस करने के लिए डिफ़ॉल्ट होगा। कोई विचार? – fortuneRice

+0

@fortuneRice 'this.get ("obj1")' का प्रयास करें, obj1 "वर्ग" Obj की विशेषता नहीं है लेकिन Obj के उदाहरणों की है। – Prusse

+0

फॉलो अप के लिए धन्यवाद; मैंने आंतरिक गुणों सरणी के बारे में स्पष्टीकरण के आधार पर c3rin का समाधान स्वीकार कर लिया। स्पष्ट स्पष्टीकरण के लिए – fortuneRice

संबंधित मुद्दे