0

Our project uses Backbone and Chaplin, and it contains a bunch of components with models, views and sometimes multiple templates for each component depending of the case. We are refactoring the most basic ones into smaller components that provide event handling and a basic template, and for modals this would be a general dialog without any content inside it.

This basic version should be called into the modal view as a subview, and then one of the possible modal templates should be rendered inside the basic template. Currently all of the modal templates share this basic structure:

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

As every modal template shares the same basic structure, that is .modal > .modal-container > .modal-content, I want to split it up like this:

modalContainer

<div class="modal {{modal_class}}" id="{{id}}" tabindex="0" role="dialog">
  <div class="modal-container">
  </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>

The main idea is that the modal templates are inserted inside the modalContainer template, and the container must be a subview of the modal view. Which would be the best way to implement this taking into account performance?

4

0 回答 0