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" }), 
]);

我想创建填充了相同数据（emailfields）的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;  
  }

});

Backbone：使用相同的数据填充多个下拉菜单？

1 个答案: