javascript - 骨干：用相同的数据填充多个下拉列表？

Question

我正在使用骨干网，这是我拥有的静态数据：

var emailfields = new EmailFields([
    new EmailField({ id: "data-email", name: "Email" }),
    new EmailField({ id: "data-first-name", name: "First Name" }),
    new EmailField({ id: "data-last-name", name: "Last Name" }), 
]);  

我想创建 n (n > 1) 填充相同数据（电子邮件字段）的下拉列表。如果选择了任何值，我想通知用户他不能再次选择相同的字段。

这是我的看法：

EmailFieldSelectView = Backbone.View.extend({

    initialize: function() {
        _.bindAll(this, "addSingleEmailField", "add");
        this.add();
    },

    addSingleEmailField: function(emailfield) {
        $("select").each(function() { 
            $(this).append(new EmailFieldView({ model: emailfield}).render().el);
        });
    },

    add: function() {
        this.collection.each(this.addSingleEmailField);
    },

});

这是我的初始化：

window.emailview = new EmailFieldSelectView({
    collection: emailfields
});

为了使用相同的数据填充每个选择，我使用 $("select").

有没有更好的方法来做到这一点（我觉得这看起来像一个黑客）？

谢谢。

Answer 1

你所拥有的似乎是一种处理事情的合理方式。您可以使用模板来减少 javascript，并需要一个视图来创建选择列表选项。

<script type="text/template" id="exampleTemplate">

  <select id="list1">
  <% _(emailFields).each(function(emailField) { %>
    <option value="<%= emailField.id %>"><%= emailField.name %></option>
  <% }); %>
  </select>

  <select id="list2">
  <% _(emailFields).each(function(emailField) { %>
    <option value="<%= emailField.id %>"><%= emailField.name %></option>
  <% }); %>
  </select>

  etc.

</script>

然后视图变成-

EmailFieldSelectView = Backbone.View.extend({
  template: _template($('#exampleTemplate').html());

  initialize: function() {
      _.bindAll(this, "addSingleEmailField", "add");
      this.render();
  },

  render: function() {
    this.$el.html(this.template({ emailFields: this.collection.toJSON() }));
    return this;  
  }

});