बैकबोन टेम्पलेट किसी अन्य टेम्पलेट में घोंसला

Question

क्या टेम्पलेट के अंदर नेस्टेड टेम्पलेट होना चाहिए और रीढ़ की हड्डी के दृश्य के माध्यम से उपयोग करना संभव है?

उदाहरण के लिए मेरे पास टेम्पलेट 1 का उपयोग करके View1 और View2 का उपयोग करके View2 है। टेम्पलेट 2 को वास्तव में टेम्पलेट 1 के अंदर एक डीआईवी में होना चाहिए। मैंने टेम्पलेट 2 के लिए टेम्पलेट 2 के लिए डीआईवी कंटेनर उचित आईडी के साथ रखा है, लेकिन यह पृष्ठ प्रदर्शित होने पर यह नहीं दिखाता है। अगर मैं टेम्पलेट 1 के अंदर से टेम्पलेट 2 डीवी कंटेनर को हटाता हूं और इसे पेज बॉडी में रखता हूं तो यह ठीक काम करता है।

तो यह सोचने के लिए कि क्या यह संभव है, या अगर मुझे विचार/मॉडल इत्यादि घोंसला है, तो यह सोचने के लिए?

टेम्पलेट 2 में डेटा तकनीकी रूप से टेम्पलेट 1 से संबंधित नहीं है, केवल टेम्पलेट 1 में एम्बेडेड पेज पर एक स्थिति में प्रदर्शित करने की आवश्यकता है।

Answer 1

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

window.View1 = Backbone.View.extend({ 
    render: function() { 
     this.view2 = new View2(); 
     this.$('insert-view-here').append(this.view2.render().el); 
    } 
}); 

Answer 2

के रूप में मैं समझता हूँ कि यह पूरा वस्तुओं है कि आप एक दूसरे को में एम्बेड कर सकते हैं के रूप में देखा गया के बारे में सोचना है विशिष्ट तरीका। मान लें कि आपके पास दो विचार हैं, व्यूए और व्यूबी। निम्नलिखित कोड दिखाता है कि आप व्यूए में व्यूबी को कैसे जोड़ सकते हैं।

# this is coffeescript, but it's easily translated to JS 
class ViewA extends Backbone.View 
    initialize:() -> 
     this.render() 

    render:()-> 
     this.$el.append(new ViewB().$el) 
     this.$el.append(new ViewB().$el) 
     return this 

आप कैसे ViewB प्रबंधित किया जाता है के साथ फैंसी मिल सकता है (गुण या जो कुछ भी करने के लिए यह बताए) या प्रत्येक ViewB उदाहरण में विभिन्न निर्माता तर्क गुजरती हैं।

Answer 3

आपको इसके लिए सबव्यूव बनाना चाहिए।

मुझे बंद होने में सबव्यूज़ का निजीकरण करना और सार्वजनिक दृश्य वापस करना पसंद है।

var View = (function (BV) { 
    var View, Subview; 

    // Only this main view knows of this subview 
    Subview = BV.extend({ 
     template: _.template(subtmpl), 

     render: function() { 
      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    View = BV.extend({ 
     template: _.template(tmpl), 

     render: function() { 
      this.$el.html(this.template(this.model.toJSON())); 

      var subview = new SubView({ model: this.model }); 

      // replace a div in your template meant for teh subview with the real subview 
      this.$el.find("#subview").replaceWith(subview.render().el); 

      return this; 
     } 
    }); 

    return View; 

}(Backbone.View)); 

var view = new View({ model: user }); 
var subview = new Subview; // Reference Error 

Answer 4

एक अन्य विकल्प उपयोगी है कि जब आप Template1 भीतर Template2 कई बार शामिल करने के लिए की जरूरत है, का कहना है कि एक <ul> भीतर <li> तत्व के रूप में, Template1 में एक Template2 समारोह पारित करने के लिए है। (Rico Sta Cruz' Backbone Patterns से।)

TasksList = Backbone.View.extend({ 
    // Template1, inlined in js. 
    template: _.template([ 
    "<ul class='task_list'>", 
     "<% items.each(function(item) { %>", 
     "<%= itemTemplate(item) %>", 
     "<% }); %>", 
    "</ul>" 
    ].join('')), 

    // Template2, inlined in js. 
    itemTemplate: _.template(
    "<li><%= name %></li>" 
), 

    render: function() { 
    var html = this.template({ 
     items: tasks /* a collection */, 
     itemTemplate: this.itemTemplate 
    }); 

    $(this.el).append(html); 
    } 
}); 

Answer 5

jQuery append() या एक डबल jQuery गुंजाइश को शामिल अतिरिक्त subview वस्तु की आवश्यकता के बिना एक और अधिक दुबला समाधान, पूर्व प्रस्तुत करना/precompile सख्ती से अंडरस्कोर पद्धति का उपयोग करके, और subview डालने के लिए है एक स्ट्रिंग के रूप में, अपने मुख्य टेम्पलेट में एक आंतरिक टिप्पणी टैग का उपयोग कर।

View = Backbone.View.extend({ 
    template: _.template(...), 
    prerender: function(tpl,model){// pre-render a component 
     var template = _.template(tpl); 
     return template(model); 
    }, 
    render: function(){ 
    var model = { ... }; 
    var component = this.prerender(this.itemTemplate, model); 
    this.$el.html(this.template(model).replace('<!--#component-->', component)); 
    } 
}); 

यह उपयोगी है खासकर यदि आपका टेम्पलेट स्थिर नहीं है, और वर्तमान दायरे की संपत्ति पर निर्भर करता है।

यह नोट करते हुए कि इस प्रश्न के दायरे के लिए, आपको व्यू 2 मॉडल को घटक में पास करना होगा।