Отображение коллекции Backbone.js в виде списка

Я пытаюсь сделать коллекцию Backbone.js как список select, используя шаблон Underscore.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>

Любые предложения?

Ответы

Ответ 1

У вас есть пара различных проблем.

  • Ваш шаблон пытается поместить элементы <option> после <select>, а не внутри него. Это приведет к недействительному HTML, и браузер будет уничтожать его после получения чего-либо из вашего шаблона.
  • rates - это коллекция Backbone, поэтому он уже имеет доступ к Underscore each; обертывая его как _(rates), просто путает Underscore и предотвращает любые итерации.
  • Внутри итерации rate является экземпляром модели Backbone, поэтому он не будет иметь свойство 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/

Я думаю, что последнее - это то, к чему вы стремились, поскольку это будет более стандартный подход к работе с шаблонами в Backbone.