Javascript 包含视图模板的主干子视图

我们的项目使用主干和卓别林，它包含一组组件，其中包含模型、视图，有时根据具体情况为每个组件提供多个模板。我们正在将最基本的组件重构为更小的组件，提供事件处理和基本模板，对于modals，这将是一个没有任何内容的通用对话框

此基本版本应作为子视图调用到模态视图中，然后应在基本模板内呈现一个可能的模态模板。目前，所有模态模板都共享此基本结构：

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

modalTemplates

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

...
...
...

---

其主要思想是将模态模板插入到modalContainer模板中，并且容器必须是模态视图的子视图。考虑到性能，哪种方法是实现此功能的最佳方法？

我可以理解为什么要将内容注入到

模态体中，我看不出有什么好的理由将通用模型模板一分为二。你这样做能实现什么？顺便说一句，在
class=“modal container>
@TJ中缺少一个引用。这不仅仅是一个通用模板，有两个模板，我们希望为这些模板和其他可能出现的模板创建一个共同的基础。我不明白你的意思。你的意思是一个模态本身的骨架可以变化？而不仅仅是内容？
<div class="modal-content">
    <div class="modal-header">
    ...
    </div>
    <div class="modal-body" tabindex="0">
    ...
    </div>
    <div class="modal-footer">
    ...
    </div>
</div>