Javascript 主干：使用相同的数据填充多个下拉列表？

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

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）下拉列表，其中填充了相同的数据（emailfields）。如果选择了任何一个值，我想通知用户，他不能再次选择相同的字段

我的看法是：

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，我使用$（“select”）

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

---

谢谢。

你所拥有的似乎是处理事情的合理方式。您可以使用一个模板来减少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;  
  }

});