javascript - 将 Backbone.js 集合呈现为选择列表

Question

我正在尝试使用 Underscore.js 模板将 Backbone.js 集合呈现为 select 列表，但该列表未被填充。 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>

有什么建议吗？

Answer 1

你有几个不同的问题。

1. 您的模板正试图将 <option> <select> 之后的元素 而不是在里面。这将产生无效的 HTML，一旦您从模板中获取任何内容，浏览器就会将其删除。
2. rates是一个 Backbone 集合，所以它已经可以访问 Underscore's each ;将其包装为 _(rates)只会混淆 Underscore 并防止任何迭代发生。
3. 在迭代内部，rate是一个 Backbone 模型实例，所以它不会有 duration属性(property)，你不得不说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 中使用模板的更标准的方法。