templates - underscore.js 嵌套模板

Question

是否可以以某种方式从下划线模板中获取 DOM 元素并将其用作另一个模板？

这个想法是我的应用程序需要渲染一个包含带有项目和摘要的循环的文档。我偶尔需要重新渲染摘要或一些项目，因此我不能只重新渲染整个文档。

但是，我希望应用程序用户可以简单地为文档创建自己的模板，并且我认为将文档的所有内容都保存在一个文件中会更容易。

我正在尝试使用这样的东西:

<script type="text/template" id="document-template">
    <div id="document">
        <h1><%= name %></h1>
        <ul class="items">
            <% _.each(items, function(item) { %> 
                <li><%= item %></li>
            <% }); %>
        </ul>
        <div id="summary">
            <p>Total items: <%= totalitems %></p>
        </div>
    </div>
</script>

现在，我可以轻松地执行此操作 var documentTemplate = _.template($('#document-template').html()); 将其转换为文档模板，但我会喜欢将摘要部分变成模板，将列表项也变成模板。

我可以做这样的事情吗:

var summaryTemplate = _.template($('#document-template #summary').html());
var itemTemplate = _.template($('#document-template .items li').html());

PS。实际上，我正在使用 jQuery 的 $.get 从外部文件加载模板。这样我就能在一个大字符串中获得文档模板。从那里，我只需 documentTemplate = _.template(loadedString);。

现在，如果我可以从字符串中提取#summary 元素，它应该可以工作。但是当我尝试将字符串转换为 DOM 元素时 ( var domElement = $(loadedString) )(所以我可以这样做: summaryTemplate = _.template($('#summary',domElement).html());，它不起作用，因为下划线无法识别 < %= %> 标签不再。

Answer 1

您可以将嵌套模板作为模板分配中的变量传递给主模板，例如:

HTML:

<script type="text/template" id="sub_template">
  <article>
    <h1>id: <%= id %><h1>
  </article>
</script>

<script type="text/template" id="main_template">
  <% for (var i = 0; i < num; i++) { %>
    <%= renderSub({id:i}) %>
  <% } %>
</script>

JS:

 var renderSub = _.template( $('#sub_template').remove().text() ),
     renderMain = _.template( $('#main_template').remove().text() );

  renderMain({num:5, renderSub:renderSub});