Rendu de la collection Backbone.js en tant que liste de sélection

J'essaie de rendre un Backbone.js collection select liste à l'aide d'un Underscore.js modèle, et la liste n'est pas remplie. Le select élément est de l'affichage, mais il n'y a pas options.

J'ai confirmé que je suis capable de passer des propriétés individuelles dans mon template et de les rendre aussi label éléments, de sorte que la question doit être la façon dont je suis en train de gérer la collecte.

Voici mon épine Dorsale code:

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

Et mon template:

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

Des suggestions?

source d'informationauteur Josh Earl

  1. 34

    Vous avez un couple de différents problèmes.

    1. Votre modèle est essayer de mettre le <option> éléments après la <select> au lieu de à l'intérieur de. Cela permettra de produire du code HTML non valide et le navigateur va boucher une fois que vous obtenez quelque chose hors de votre modèle.
    2. rates est l'épine Dorsale de la collection de sorte qu'il a déjà accès à Trait de soulignement de l' ; les enveloppant comme _(rates) confond juste un trait de Soulignement et empêche toute itérations de passe.
    3. À l'intérieur de l'itération, rate est l'épine Dorsale instance du modèle afin de ne pas avoir un duration de la propriété, vous avez à dire rate.get('duration').

    Votre modèle doit ressembler à ceci:

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

    Démo: http://jsfiddle.net/ambiguous/AEqjn/

    Alternativement, vous pouvez simplement fixer l'imbrication d'erreur dans votre modèle pour produire un code HTML valide:

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

    et l'utilisation de la méthode toJSON() de votre point de vue pour nourrir les données brutes pour votre modèle plutôt que la collection elle-même:

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

    Démo: http://jsfiddle.net/ambiguous/VAxFW/

    Je pense que le dernier est ce que vous visez, ce qui permettrait une plus approche standard pour travailler avec des modèles de la colonne vertébrale.