9

ハンドルバーテンプレートを保持するビューがあります。そのテンプレートは、別の部分的なテンプレートで構成されています。その部分的なテンプレートには、アプリのさまざまな部分で使用している結果のリストが含まれています。とにかく、結果をフィルタリングしようとするときは、その部分だけをレンダリングしたいと思います。つまり、バックボーンビューは、ビュー全体を部分的にレンダリングするべきではありません。それはできますか？

4

1 に答える 1

20

はい、可能です。最も簡単な方法は、完全なビューをレンダリングするときと同じようにテンプレート全体を実行することですが、ビューの で必要な部分のみを置き換えますel。

何かのようなもの：

template: Handlebars.compile(templateHtml),

render: function() {
  //let's say your render looks something like this
  this.$el.html(this.template(this.model.toJSON());
},

renderList: function() {
  var html = this.template(this.model.toJSON());
  var selector = "#list";

  //replace only the contents of the #list element
  this.$el.find(selector).replaceWith($(selector, html));
}

テンプレートがどの程度動的であるかによってはthis.delegateEvents()、ビューのイベントが正しく機能するように、リストを置き換えた後に呼び出す必要がある場合があります。

コメントに基づいて編集：

明確にするために、ここで提案する方法は、ビューのメイン ハンドルバー テンプレートを再度実行しますが、ビュー全体を再度レンダリングするわけではありません。

ステップバイステップ：

  1. 通常のレンダリングと同じように、Handlebars テンプレート関数を実行します。

    var html = this.template(this.model.toJSON());

    変数には、HTML マークアップの文字列htmlが含まれるようになりました。まだ何もレンダリングされていません。

  2. 再レンダリングする要素のセレクターを定義します。

    var selector = "#list";

  3. 置き換える DOM 要素を見つけます。これは、ビューをすでに 1 回レンダリングしていることを前提としています。#listそれ以外の場合、内に要素はありませんthis.$el。

    this.$el.find(selector)

  4. テンプレート化された html 文字列で対応する要素を見つけ、既存の要素を新しい要素に置き換えます。

    .replaceWith($(selector, html));

#listこれは、現在ページにある要素のみを置き換えます。外側#listにあるものは、再レンダリングしたり、触れたりすることはありません。

部分的なテンプレートを個別に実行してレンダリングする代わりに、この方法を提案する主な理由は、ビューがテンプレートとテンプレート エンジンの実装の詳細について何も知る必要がないためです。要素があることを知る必要があるすべて#listです。これはよりクリーンなソリューションであり、テンプレートの詳細をビュー ロジックから分離していると思います。

于 2013-01-31T10:35:50.680 に答える