javascript backbone.js नेस्टेड विचारों और मॉडलों की संरचना




(4)

"मैं कर सकता हूं" प्रश्न का सामान्य उत्तर हमेशा "हाँ, जब तक आप कोड लिखना चाहते हैं।" बैकबोन के पीछे बिंदु मॉडल और दृश्य का एक मजबूत अलगाव प्रदान करना है। यदि बी 1 में ए 1 का संदर्भ है, और ए 1 में सी 1 का संदर्भ है, तो आप विधियों को बनाने और नियमों को स्थापित करने में पूरी तरह से सक्षम हैं जिसके द्वारा बी 1 ए 1 और सी 1 को संशोधित कर सकता है और आगे।

विचारों को उनके संबंधित मॉडल से सीआरयूडी कार्यक्रम प्राप्त करने के लिए स्थापित किया जाना चाहिए। यदि उपयोगकर्ता B1view के साथ कुछ करता है जो B1model को संशोधित करता है, और B1model बदले में A1model को संशोधित करता है, तो A1model को ऐसी घटना उत्पन्न करनी चाहिए जो A1view प्राप्त करता है और A1view को पुनः प्रस्तुत करने का कारण बनता है, और आगे। यह जादू की तरह होना चाहिए। (प्रैक्टिस में, जादू को सही करने में कुछ समय लगता है, लेकिन मुझे बैकबोन वास्तव में शक्तिशाली होने के लिए मिला है। और बैकबोनरेलेशनल चीजों के साथ मदद करता है जैसे आप यहां वर्णन कर रहे हैं।)

Backbone.js का उपयोग करना:

मेरे पास एक शीर्ष स्तर मॉडलए है जिसमें 2 विशेषताएँ और 2 नेस्टेड मॉडल, मॉडलबी और मॉडलसी शामिल हैं। मॉडलबी और मॉडलसी प्रत्येक के पास 2 विशेषताएं हैं:

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

मॉडल ए के लिए एक व्यूए और मॉडलबी के लिए एक व्यूबी है। व्यूए का रेंडर फ़ंक्शन शरीर पर एक नया div डालता है, जबकि व्यूबी के रेंडर एक एच 1 बनाता है। व्यूए के प्रारंभिकरण ने व्यूबी को नए div में एच 1 डालने के लिए प्रस्तुत किया है। इस अलगाव के पीछे तर्क यह है कि एच 1 बदल सकता है और व्यूए से स्वतंत्र पुन: प्रस्तुत करने की आवश्यकता है।

ViewA
    initialise: 
        //call ViewA's own render function
        this.render() 

        //call ViewB's render function that further modifies the $("#new") div created earlier.
        $("#new").append(ViewB.render().el)

    //ViewA's own render function
    render: //place <div id="new"></div> onto 'body'

ViewB
    render: //create a <h1></h1>
    funcB1: //can this access it's parent ModelA's attributes and other objects?

प्रश्न 1: व्यूबी में फ़ंक्शन funcB1 है। क्या यह फ़ंक्शन इसके मूल मॉडल के गुणों तक पहुंच सकता है? विशेषताएँ जैसे एट्रिब्यूट ए 1, या यहां तक ​​कि विशेषता सी 1 (जो एक भाई / चचेरे भाई होगी)?

प्रश्न 2: क्यू 1 के आगे विस्तार के रूप में, क्या funcB1 व्यूए से जुड़े डीओएम तत्वों तक पहुंच सकता है? (इस उदाहरण में, # नया div?)

प्रश्न 3: सामान्य रूप से, मैं उपरोक्त वर्णित दृश्यों और मॉडल के बीच संबंधों को कैसे परिभाषित करता हूं ताकि सबकुछ ठीक से मिल सके?

मुझे एहसास है कि यह प्रश्न कुछ हद तक अमूर्त है लेकिन कोई भी मदद या दिशानिर्देशों की सराहना करता है।


संबंधित मॉडलों पर विशेषताओं तक पहुंचने में सक्षम होने के लिए, मॉडल के पास कुछ प्रकार के ज्ञान होना चाहिए कि यह किस मॉडल से संबंधित है। बैकबोन.जेएस संबंधों या घोंसले से पूरी तरह से निपट नहीं लेता है, जिसका मतलब है कि आपको स्वयं यह सुनिश्चित करना होगा कि मॉडल एक-दूसरे के ज्ञान रखें। अपने सवालों के जवाब देने के लिए, इसके बारे में जाने का एक तरीका यह सुनिश्चित करना है कि प्रत्येक बच्चे के मॉडल में 'पैरेंट' विशेषता हो। इस तरह आप सबसे पहले घोंसले को माता-पिता के पास जा सकते हैं और फिर किसी भी भाई बहन को नीचे ले जा सकते हैं।

अपने प्रश्नों के साथ अधिक विशिष्ट होने के लिए। मॉडल ए शुरू करते समय, आप शायद मॉडल बी और मॉडल सी बना रहे हैं, मैं ऐसा करने पर मूल मॉडल के लिए एक लिंक सेट करने का सुझाव दूंगा, जैसे:

ModelA = Backbone.Model.extend({

    initialize: function(){
        this.modelB = new modelB();
        this.modelB.parent = this;
        this.modelC = new modelC();
        this.modelC.parent = this;
    }
}

इस तरह आप इस माता-पिता को कॉल करके किसी भी बाल मॉडल फ़ंक्शन में मूल मॉडल तक पहुंच सकते हैं।

अपने विचारों के बारे में, नेस्टेड रीढ़ की हड्डी के विचारों को करते समय, मुझे दृश्य के टैगनाम विकल्प का उपयोग करके प्रत्येक दृश्य को एक HTML टैग का प्रतिनिधित्व करना आसान लगता है। मैं आपके विचार इस प्रकार लिखूंगा:

ViewA = Backbone.View.extend({

    tagName: "div",
    id: "new",

    initialize: function(){
       this.viewB = new ViewB();
       this.viewB.parentView = this;
       $(this.el).append(this.viewB.el);
    }
});

ViewB = Backbone.View.extend({

    tagName: "h1",

    render: function(){
        $(this.el).html("Header text"); // or use this.options.headerText or equivalent
    },

    funcB1: function(){
        this.model.parent.doSomethingOnParent();
        this.model.parent.modelC.doSomethingOnSibling();
        $(this.parentView.el).shakeViolently();
    }

});

फिर आपके आवेदन प्रारंभिक कोड (जैसे आपके नियंत्रक में) में, मैं व्यूए शुरू करूंगा और इसके तत्व को शरीर तत्व के अंदर रखूंगा।


उपरोक्त समाधान सही रास्ते पर है लेकिन कुछ समस्याएं हैं।

initialize: function(){
  this.viewB = new ViewB();
  this.viewB.parentView = this;
  $(this.el).append(this.viewB.el);    
}

मुख्य रूप से, मॉडल का toJSON () अब पुराना डेटा देता है। मैंने backbone.js प्लगइन में इस समस्या को ठीक करने के लिए एक समाधान पोस्ट किया है। इसका उपयोग करने के लिए आपका स्वागत है।


उदाहरण के लिए आप कुछ एक्सटेंशन, बैकबोन-फॉर्म https://github.com/powmedia/backbone-forms उपयोग कर सकते हैं। अपने उपयोग के मामले का पालन करने के लिए एक स्कीमा परिभाषित करें:

var ModelB = Backbone.Model.extend({
    schema: {
        attributeB1: 'Text',
        attributeB2: 'Text'
    }
});

var ModelC = Backbone.Model.extend({
    schema: {
        attributeC: 'Text',
    }
});

var ModelA = Backbone.Model.extend({
    schema: {
        attributeA1: 'Text',
        attributeA2: 'Text',
        refToModelB: { type: 'NestedModel', model: ModelB, template: 'templateB' },
        refToModelC: { type: 'NestedModel', model: ModelC, template: 'templateC' }
    }
});

आंशिक टेम्पलेट्स के लिए https://github.com/powmedia/backbone-forms#customising-templates टेम्पलेट्स देखें।

यहां महत्वपूर्ण भाग type: 'NestedModel' और template: 'templateXXX'

इस प्लगइन में कुछ सीमाएं हैं लेकिन आप https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources पर अन्य लोगों को देख सकते हैं।





backbone.js