web-dev-qa-db-ja.com

Backbone.jsコレクションを選択リストとしてレンダリングする

Underscore.jsテンプレートを使用してBackbone.jsコレクションをselectリストとしてレンダリングしようとしていますが、リストにデータが入力されていません。 select要素が表示されていますが、optionsはありません。

個々のプロパティをテンプレートに渡してlabel要素としてレンダリングできることを確認したので、問題はコレクションをどのように処理しようとしているのかということです。

これが私のバックボーンコードです：

Rate = Backbone.Model.extend({
    duration : null
});

Rates = Backbone.Collection.extend({
    initialize: function (model, options) {
    }
});

AppView = Backbone.View.extend({
    el: $('#rate-editor-container'),
    initialize: function () {
      this.rates = new Rates(null, { view: this } );

      this.rates.add(new Rate ({ duration: "Not Set" }));
      this.rates.add(new Rate ({ duration: "Weekly" }));
      this.rates.add(new Rate ({ duration: "Monthly" }));

      this.render();
    },
    render: function() {
      var rate_select_template = _.template($("#rate_select_template").html(), {rates: this.rates, labelValue: 'Something' });
      $('#rate-editor-container').html(rate_select_template);
    },
});

var appview = new AppView();

そして私のテンプレート：

<script type="text/template" id="rate_select_template">
  <select id="rate-selector"></select>
  <% _(rates).each(function(rate) { %>
    <option value="<%= rate.duration %>"><%= rate.duration %></option>
  <% }); %>
</script>

<div id="rate-editor-container"></div>

助言がありますか？

javascriptbackbone.jsunderscore.js
16
Josh Earl

あなたにはいくつかの異なる問題があります。

  1. テンプレートは、 inside の代わりに_<option>_要素 after _<select>_を配置しようとしています。これにより無効なHTMLが生成され、テンプレートから何かを取得すると、ブラウザはそれを破棄します。
  2. ratesはバックボーンコレクションであるため、すでに アンダースコアeach ;にアクセスできます。 _(rates)としてラップすると、アンダースコアが混乱し、反復が発生しなくなります。
  3. 反復内では、rateはバックボーンモデルインスタンスであるため、durationプロパティはありません。rate.get('duration')と言う必要があります。

テンプレートは次のようになります。

_<script type="text/template" id="rate_select_template">
    <select id="rate-selector">
        <% rates.each(function(rate) { %>
            <option value="<%= rate.get('duration') %>"><%= rate.get('duration') %></option>
        <% }); %>
    </select>
</script>
_

デモ： http://jsfiddle.net/ambiguous/AEqjn/

または、テンプレートのネストエラーを修正して、有効なHTMLを生成することもできます。

_<script type="text/template" id="rate_select_template">
    <select id="rate-selector">
        <% _(rates).each(function(rate) { %>
            <option value="<%= rate.duration %>"><%= rate.duration %></option>
        <% }); %>
    </select>
</script>
_

ビューで toJSON() を使用して、コレクション自体ではなく生データをテンプレートにフィードします。

_var rate_select_template = _.template($("#rate_select_template").html(), {
    rates: this.rates.toJSON(),
    labelValue: 'Something'
});
_

デモ： http://jsfiddle.net/ambiguous/VAxFW/

後者は、バックボーンでテンプレートを操作するためのより標準的なアプローチになるため、あなたが目指していたものだと思います。

34
mu is too short