javascript - ビュー テンプレートを含むバックボーン サブビュー

Question

私たちのプロジェクトは Backbone と Chaplin を使用しており、モデル、ビュー、場合によってはコンポーネントごとに複数のテンプレートを含む一連のコンポーネントが含まれています。最も基本的なものを、イベント処理と基本的なテンプレートを提供する小さなコンポーネントにリファクタリングしています。モーダルの場合、これは内部にコンテンツのない一般的なダイアログになります。

この基本バージョンは、サブビューとしてモーダル ビューに呼び出され、可能なモーダル テンプレートの 1 つが基本テンプレート内でレンダリングされる必要があります。現在、すべてのモーダル テンプレートは、次の基本構造を共有しています。

<div class="modal {{modal_class}}" id="{{id}}" tabindex="0" role="dialog">
  <div class="modal-container">
    <div class="modal-content">
      <div class="modal-header">
      ...
      </div>
      <div class="modal-body" tabindex="0">
      ...
      </div>
      <div class="modal-footer">
      ...
      </div>
    </div>
  </div>
</div>

すべてのモーダル テンプレートは同じ基本構造を共有している.modal > .modal-container > .modal-contentため、次のように分割します。

modalContainer

<div class="modal {{modal_class}}" id="{{id}}" tabindex="0" role="dialog">
  <div class="modal-container">
  </div>
</div>

モーダルテンプレート

<div class="modal-content">
    <div class="modal-header">
    ...
    </div>
    <div class="modal-body" tabindex="0">
    ...
    </div>
    <div class="modal-footer">
    ...
    </div>
</div>

主な考え方は、モーダル テンプレートが modalContainer テンプレート内に挿入され、コンテナーがモーダル ビューのサブビューである必要があるということです。パフォーマンスを考慮して、これを実装する最良の方法はどれですか?