2

あなたが私の問題を理解できるように、私が最初に必要なものを示しましょう。私は次のような連絡先ビューを持っています：

ContactView = Backbone.View.extend({
    template: _.template("Name: <%= name %>
                          E-mail: <%= email %>
                          Phones
                          <%= label1 %> - <%= number1 %>
                          <%= label2 %> - <%= number2 %>"),
    render: function() {
       var contact = this.template(this.model.toJSON());
       this.$el.html(contact);
    }
});

これまでのところ、問題は電話の部分がリストであり、私のモデルが電話の配列を保持していることです。そのテンプレートに動的に配置する必要があります。

私が考えたのは、別のモデルを作成し、このためだけにPhoneとPhoneViewを表示することでした。次に、ContactViewで、次のようなメソッドrender_phonesを作成します。

render_phones: function() {
    var phones = this.model.get('phones');
    var phones_str = "";
    for (var i in phones) {
        var phone = new Phone(phones[i]);
        var phoneView = new PhoneView({model: phone});
        phones_str += phoneView.render();
    }
    return phones_str;
}

ContactViewテンプレートを次のように変更しました。

template: _.template("Name: <%= name %>
                      E-mail: <%= email %>
                      Phones
                      <%= phones %>"),

しかし、私のrenderメソッドで電話リストをレンダリングしてテンプレート内に配置するにはどうすればよいですか？

このような状況に対処するためのパターンを見つけることができませんでした。そして、コードはあまり良く見え始めています。

ps：これは単なる例です。これが必要なアプリケーションの他の部分がいくつかあります。これは、リスト内のコンテンツを含むサブビューを生成する必要があるビューです。

4

1 に答える 1

5

underscore.jsを使用してテンプレートをレンダリングしているようです。underscore.jsは、テンプレート内のコレクションをレンダリングする方法を提供します（2番目の例を参照）。例えば

template: _.template("Name: <%= name %>
                          E-mail: <%= email %>
                          Phones
                <% _.each(phones, function (phone) { %>
                 <%= label %> - <%= number %>
                <% }); %>"),

モデルごとに個別のビューをレンダリングし、同じレンダリングモデルでを変更しelてそこにレンダリングすることもできますが、ビューが必要でない限り（たとえば、コンテンツが変更されたり、イベントを聞いている場合）、おそらく料金は発生しません。そのようにするために。これを達成する方法の例を次に示します

render: function () {
  this.$el.html(this.model.toJSON());
  _.each(this.model.get('phones'), function(phone) {
    this.$el.find('.phoneArea').append(new phoneView({model: phone}).render().el));
  },this);
  return this;
}

また、このルートを使用する場合は、ビューをキャッシュするのにおそらくお金がかかることに注意してください。ただし、コンテンツをレンダリングするだけの場合は、電話番号を配列として保持し、レンプレート。

于 2012-06-26T14:30:47.700 に答える