Rendering Backbone.js Colección como una lista de selección

Question

Estoy tratando de renderizar una colección Backbone.js como una lista select usando una plantilla Underscore.js, y la lista no se está llenando. Se muestra el elemento select, pero no hay options.

He confirmado que puedo pasar propiedades individuales a mi plantilla y representarlas como elementos label, por lo que el problema debe ser la forma en que trato de manejar la colección.

Aquí está mi código Backbone:

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(); 

Y mi plantilla:

<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> 

¿Alguna sugerencia?

Answer 1

Tienes un par de problemas diferentes.

1. Su plantilla está tratando de poner los elementos <option> después de la <select> en lugar de en el interior ella. Esto producirá HTML no válido y el navegador lo eliminará una vez que obtenga algo de su plantilla.
2. rates es una colección Backbone por lo que ya tiene acceso a Underscore'seach; envolverlo como _(rates) solo confunde Underscore y evita que ocurran iteraciones.
3. Dentro de la iteración, rate es una instancia de modelo Backbone por lo que no tendrá una propiedad duration, debe decir rate.get('duration').

La plantilla debe ser de la misma familia:

<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> 

Demostración: http://jsfiddle.net/ambiguous/AEqjn/

Como alternativa, sólo puede corregir el error de anidación en la plantilla para producir HTML válido:

<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> 

y use toJSON() en su vista para alimentar datos brutos a su plantilla en lugar de a la colección misma :

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

Demostración: http://jsfiddle.net/ambiguous/VAxFW/

creo que el último es lo que se proponían como que haría con un enfoque más estándar para trabajar con plantillas en la espina dorsal.