将Backbone.js Collection渲染为选择列表 [英] Rendering Backbone.js Collection as a select list

问题描述

我正在尝试使用Underscore.js模板将Backbone.js集合呈现为 select 列表，并且列表未填充。显示 select 元素，但没有选项。

I'm trying to render a Backbone.js collection as a select list using an Underscore.js template, and the list isn't getting populated. The select element is displaying, but there are no options.

我已经确认我能够将单个属性传递到我的模板并将它们呈现为 label 元素，所以问题必须是我如何处理集合。

I have confirmed that I'm able to pass individual properties into my template and render them as label elements, so the issue must be how I'm trying to handle the collection.

这是我的Backbone代码：

Here's my Backbone 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();

我的模板：

<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. 你的模板试图把< ;选项> 元素 < select> 后代替 。这将生成无效的HTML，浏览器会在您从模板中获取任何内容后进行屠宰。


2. rates 是一个Backbone集合，所以它已经可以访问下划线 每个 ;将其包装为 _（费率）只会混淆Underscore并阻止任何迭代发生。


3. 在迭代中， rate 是一个Backbone模型实例，因此它没有持续时间属性，你必须说 rate.get （'持续时间'）。

1. Your template is trying to put the <option> elements after the <select> instead of inside it. This will produce invalid HTML and the browser will butcher that once you get anything out of your template.
2. rates is a Backbone collection so it already has access to Underscore's each; wrapping it as _(rates) just confuses Underscore and prevents any iterations from happening.
3. Inside the iteration, rate is a Backbone model instance so it won't have a duration property, you have to say rate.get('duration').

您的模板看起来应该更像这样：

Your template should look more like this:

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

Alternatively, you can just fix the nesting error in your template to produce valid 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（） 在您的视图中将原始数据提供给模板而不是集合本身：

and use toJSON() in your view to feed raw data to your template rather than the collection itself:

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

演示： http://jsfiddle.net/ambiguous/VAxFW/

我认为后者是你的目标，因为在Backbone中使用模板的更标准方法。

I think the latter one is what you were aiming for as that would a more standard approach to working with templates in Backbone.

这篇关于将Backbone.js Collection渲染为选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！