एक चुनिंदा सूची के रूप में Backbone.js संग्रह को प्रस्तुत करना

Question

मैं एक Underscore.js टेम्पलेट का उपयोग कर select सूची के रूप में एक Backbone.js संग्रह प्रस्तुत करने का प्रयास कर रहा हूं, और सूची पॉप्युलेट नहीं हो रही है। select तत्व प्रदर्शित हो रहा है, लेकिन options नहीं हैं।

मैंने पुष्टि की है कि मैं अपने टेम्पलेट में अलग-अलग गुणों को पारित करने में सक्षम हूं और उन्हें label तत्वों के रूप में प्रस्तुत करने में सक्षम हूं, इसलिए समस्या यह होनी चाहिए कि मैं संग्रह को संभालने का प्रयास कैसे कर रहा हूं।

Rate = Backbone.Model.extend({ 
    duration : null 
}); 

Rates = Backbone.Collection.extend({ 
    initialize: function (model, options) { 
    } 
}); 

AppView = Backbone.View.extend({ 
    el: $('#rate-editor-container'), 
    initialize: function() { 
     this.rates = new Rates(null, { view: this }); 

     this.rates.add(new Rate ({ duration: "Not Set" })); 
     this.rates.add(new Rate ({ duration: "Weekly" })); 
     this.rates.add(new Rate ({ duration: "Monthly" })); 

     this.render(); 
    }, 
    render: function() { 
     var rate_select_template = _.template($("#rate_select_template").html(), {rates: this.rates, labelValue: 'Something' }); 
     $('#rate-editor-container').html(rate_select_template); 
    }, 
}); 

var appview = new AppView(); 

और मेरे टेम्पलेट:

<script type="text/template" id="rate_select_template"> 
    <select id="rate-selector"></select> 
    <% _(rates).each(function(rate) { %> 
    <option value="<%= rate.duration %>"><%= rate.duration %></option> 
    <% }); %> 
</script> 

<div id="rate-editor-container"></div> 

कोई सुझाव

यहाँ मेरी रीढ़ कोड है?

Answer 1

आपके पास कुछ अलग समस्याएं हैं।

1. आपका टेम्पलेट के बाद<select> बजाय इसके अंदर <option> तत्वों डाल करने के लिए कोशिश कर रहा है। यह अमान्य HTML उत्पन्न करेगा और ब्राउजर कुचल देगा कि एक बार जब आप अपने टेम्पलेट से कुछ प्राप्त कर लेंगे।
2. rates एक बैकबोन संग्रह है, इसलिए इसकी पहले से ही Underscore'seach तक पहुंच है; इसे _(rates) के रूप में लपेटकर बस अंडरस्कोर को भ्रमित कर देता है और किसी भी पुनरावृत्ति को होने से रोकता है।
3. पुनरावृत्ति के अंदर, rate एक बैकबोन मॉडल उदाहरण है, इसलिए इसमें duration संपत्ति नहीं होगी, आपको rate.get('duration') कहना होगा।

आपका टेम्पलेट अधिक इस तरह दिखना चाहिए:

<script type="text/template" id="rate_select_template"> 
    <select id="rate-selector"> 
     <% rates.each(function(rate) { %> 
      <option value="<%= rate.get('duration') %>"><%= rate.get('duration') %></option> 
     <% }); %> 
    </select> 
</script> 

डेमो: http://jsfiddle.net/ambiguous/AEqjn/

वैकल्पिक रूप से, तुम सिर्फ अपने खाके में घोंसले त्रुटि को ठीक मान्य HTML उत्पादन करने के लिए कर सकते हैं:

<script type="text/template" id="rate_select_template"> 
    <select id="rate-selector"> 
     <% _(rates).each(function(rate) { %> 
      <option value="<%= rate.duration %>"><%= rate.duration %></option> 
     <% }); %> 
    </select> 
</script> 

और संग्रह के बजाए अपने टेम्पलेट पर कच्चे डेटा को खिलाने के लिए toJSON() का उपयोग करें :

var rate_select_template = _.template($("#rate_select_template").html(), { 
    rates: this.rates.toJSON(), 
    labelValue: 'Something' 
}); 

डेमो: http://jsfiddle.net/ambiguous/VAxFW/

मुझे लगता है कि बाद के एक क्या आपको लगता है कि के रूप में के लिए लक्ष्य कर रहे थे होगा रीढ़ में टेम्पलेट्स के साथ काम करने के लिए एक अधिक मानक दृष्टिकोण।