2

私はバックボーンで作業しています。これは私が持っている静的データです:

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") を使用しています。

それを行うためのより良い方法はありますか（これはハックのように見えます）？

ありがとう。

4

1 に答える 1

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

});
于 2012-09-21T12:39:47.363 に答える