javascript - Backbone : populate multiple drop-downs with the same data?

Question

我正在使用 backbone，这是我拥有的静态数据:

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").

有没有更好的方法来做到这一点(我觉得这看起来像 hack)？

谢谢。

Answer 1

你所得到的似乎是处理事情的合理方法。您可以使用模板来减少 javascript 并需要一个 View 来创建选择列表选项。

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

那么 View 就变成了——

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;  
  }

});