backbone.js में 2 अलग-अलग टेम्पलेट्स के बीच वैकल्पिक

Question

मेरे मॉडल के विचारों के लिए मेरे पास 2 अलग-अलग टेम्पलेट हैं। प्रत्येक बार मॉडल को डेटाबेस से लाया जाता है, बैकएंड से प्राप्त पहले 3 मॉडल (# 1, 2, 3) में पहले टेम्पलेट का उपयोग करके बनाया गया दृश्य होगा, अगले 4 मॉडल (# 4, 5, 6, 7) दूसरे टेम्पलेट का उपयोग करेंगे, अगले 3 मॉडल (# 8, 9, 10) पहले टेम्पलेट का उपयोग करेंगे और इसी तरह।

समस्या: मैं backbone.js का उपयोग करके इस वैकल्पिक टेम्पलेट को कैसे पेश करूं?

जे एस कोड

// Views 

PhotoListView = Backbone.View.extend({ 
    el: '#photo_list', 

    render: function() { 
     $(this.el).html(''); 
     _.each(this.model.models, function(photo) { 
      $(this.el).append(new PhotoListItemView({ model: photo }).render().el); 
     }, this); 
     return this; 
    } 
}); 

PhotoListItemView = Backbone.View.extend({ 
    tagNAme: 'div', 
    className: 'photo_box', 

    template: _.template($('#tpl_PhotoListView').html()), 

    initialize: function() { 
     this.model.bind('destroy', this.close, this); 
    }, 

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

    close: function() { 
     this.unbind(); 
     this.remove(); 
    } 
}); 

Answer 1

सबसे पहले, अपने PhotoListView एक संग्रह लपेटकर है ताकि आप इसे बनाने के लिए this.collection दृश्य के अंदर और new PhotoListView({ collection: c }) का उपयोग करना चाहिए। दृश्य collection option similarly to how they treat model का इलाज:

निर्माता/प्रारंभnew View([options])

[...] वहाँ कई विशेष विकल्प है कि, अगर पारित कर दिया, सीधे देखने से जोड़ दी जाएगी हैं: model, collection, el, id, className, tagName और विशेषताएँ।

सही नामों का उपयोग भ्रम को रोकने में मदद करेगा। इसके अलावा, विचारों में some Underscore methods पहले से मिश्रित है ताकि आप _.each(this.collection.models, ...) या _(this.collection.models).each(...) के बजाय this.collection.each(...) कह सकें। आप $(this.el) के बजाय this.$el का भी उपयोग कर सकते हैं।

और अब आपकी वास्तविक समस्या पर। आप अपने प्रति-मॉडल को देखने के लिए दो टेम्प्लेट जोड़ सकते हैं:

PhotoListItemView = Backbone.View.extend({ 
    template0: _.template($('#the-first-template-id').html()), 
    template1: _.template($('#the-other-template-id').html()), 
    //... 
}); 

और यह बताने के लिए एक विकल्प है जो एक का उपयोग करने के लिए:

initialize: function(options) { 
    this.template = this['template' + options.template_number]; 
    //... 
} 

तो फिर तुम सिर्फ संग्रह देखने से group विकल्प निर्दिष्ट करने की आवश्यकता । अंडरस्कोर के each दूसरा तर्क के रूप में कॉलबैक फ़ंक्शन पर यात्रा सूचकांक गुजरता है तो आप बस जो template_number उपयोग करने के लिए यह पता लगाने की पूर्णांक गणित का एक सा की जरूरत है:

this.collection.each(function(photo, i) { 
    // Grouped in threes and you're alternating between two templates. 
    var n = Math.floor(i/3) % 2; 
    var v = new PhotoListItemView({ model: photo, template_number: n }); 
    this.$el.append(v.render().el); 
}, this);