Backbone.js: templating

Question

यह तकनीकी रूप से, घोंसला विचारों करना संभव है के माध्यम से नेस्टिंग विचारों templating का उपयोग कर, ऐसा ही कुछ:

<%= new PhotoCollectionView({model:new PhotoCollection(model.similarPhotos)}).render().el) %> 

मैं भी विधि प्रस्तुत करना में सब सामान रख सकते हैं, लेकिन templating ज्यादा देता है लचीलापन और लेआउट के लिए और अधिक कमरा।

मैंने उपर्युक्त संस्करण की कोशिश की, लेकिन स्क्रीन पर परिणाम के रूप में मुझे जो कुछ मिलता है वह [HTMLDivElement] है।

यदि मैं सिर्फ HTML को निकालने का प्रयास करता हूं, तो jQuery के HTML का उपयोग करके, मुझे इसे प्रस्तुत किया जाता है, लेकिन यह पता चला है कि मुद्रित किए गए डोम नोड्स उन लोगों से अलग हैं जिनके विचारों का संदर्भ है, क्योंकि दृश्य उदाहरण का उपयोग करके उन डोम नोड्स के साथ कोई भी बातचीत संभव नहीं है। उदाहरण के लिए यदि दृश्य में मैं $(this.el).hide() कहता हूं, कुछ भी नहीं होगा।

उचित तरीका क्या है, यदि कोई है?

Answer 1

मैं आम तौर पर पहले मूल दृश्य प्रस्तुत करता हूं। मैं फिर बच्चे के तत्व को खोजने के लिए this.$('selector') विधि का उपयोग करता हूं जिसे मैं बच्चे के दृश्य के रूप में उपयोग कर सकता हूं।

यहाँ एक पूर्ण उदाहरण है:

var ChildView = Backbone.View.extend({ 
    //.. 
}) 

var ParentView = Backbone.View.extend({ 
    template: _.template($('#parent-template').html()), 
    initialize: function() { 
    _.bindAll(this, 'render'); 
    } 
    render: function() { 
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this; 
    } 
}); 

var v = new ParentView(); 
v.render(); 

Answer 2

मुझे टेम्पलेट के भीतर ही पता नहीं है, लेकिन मैंने इसे पहले टेबल और सूचियों के साथ किया है। बाहरी टेम्पलेट में, बस ठूंठ है:

<script type="text/template" id="table-template"> 
    <table> 
     <thead> 
      <th>Column 1</th> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</script> 

और अलग-अलग मदों के लिए: <% = फ़ील्ड 1%>

फिर अपने विधि प्रस्तुत करना में

, बस अलग-अलग आइटम प्रस्तुत करना और उन्हें संलग्न टोब तत्व के लिए ...

Answer 3

हर बार जब आप प्रस्तुत करना मेरे लिए बहुत अक्षम लगता है एक नई वस्तु को प्रारंभ करने का निर्णय। विशेष रूप से इस:

render: function() { 
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this; 
    } 

कुछ आदर्श रूप में माता पिता का प्रतिपादन किया जाना चाहिए

तरह

render: function() { 
    this.$el.html(this.template()); 
    this.childView1.render(); 
    this.childView2.render(); 
} 

और बच्चों निर्माण तभी हो जाना चाहिए जब माता-पिता को प्रारंभ:

initialize: function() { 
     this.childView1 = new ChildView1(selector1); 
     this.childView2 = new ChildView2(selector2); 
} 

समस्या है कि हमारे पास मूल टेम्पलेट को प्रस्तुत करने से पहले selector1 और selector2 नहीं है। यह वह जगह है जहां मैं अभी अटक गया हूं :)

Answer 4

स्वीकार्य उत्तर में एक बड़ी खामियां है, जो तथ्य यह है कि प्रत्येक बार इसे प्रस्तुत करने के लिए चाइल्ड व्यू को फिर से शुरू किया जा रहा है। इसका मतलब है कि आप राज्य खो देंगे और संभावित रूप से प्रत्येक रेंडर पर जटिल विचारों को फिर से शुरू करना होगा।http://codehustler.org/blog/rendering-nested-views-backbone-js/

हालांकि संक्षेप में, मैं कुछ इस तरह का उपयोग कर सुझाव है:

var BaseView = Backbone.View.extend({ 

    // Other code here... 

    renderNested: function(view, selector) { 
     var $element = (selector instanceof $) ? selector : this.$el.find(selector); 
     view.setElement($element).render(); 
    } 
}); 

var CustomView = BaseView.extend({ 

    // Other code here... 

    render: function() { 
     this.$el.html(this.template()); 
     this.renderNested(this.nestedView, ".selector"); 
     return this; 
    } 
}); 

आप बैकबोन दृश्य का विस्तार करने के अगर तुम नहीं की जरूरत नहीं है

मैं इस बारे में एक ब्लॉग यहाँ लिखा था चाहते हैं, renderNested विधि कहीं भी आप को रखा जा सकता है।

उपर्युक्त कोड के साथ, अब आप प्रारंभिक विधि में चाइल्ड व्यू प्रारंभ कर सकते हैं और फिर रेंडर() कहलाते समय इसे प्रस्तुत कर सकते हैं।

Answer 5

Backbone.Subviews मिश्रण देखें। यह नेस्टेड विचारों के प्रबंधन के लिए बनाया गया एक न्यूनतम मिश्रण है और माता-पिता द्वारा प्रदान किए जाने पर हर बार बच्चे के विचारों को फिर से शुरू नहीं किया जाता है।