javascript - template - backbonejs github

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

Question

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

He confirmado que puedo pasar propiedades individuales a mi plantilla y presentarlas como elementos de label , por lo que el problema debe ser cómo 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 <select> lugar de dentro de él. 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 each ; envolverlo como _(rates) solo confunde subrayar y evita que ocurran iteraciones.
3. Dentro de la iteración, la rate es una instancia del modelo Backbone por lo que no tendrá una propiedad de duration , debe decir rate.get(''duration'') .

Su plantilla debería verse más como esto:

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

De forma alternativa, puede corregir el error de anidamiento en su plantilla para generar 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 enviar datos sin procesar a su plantilla en lugar de a la colección en sí 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 este último es lo que estabas buscando ya que sería un enfoque más estándar para trabajar con plantillas en Backbone.