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.