underscore.js嵌套模板
是否有可能以某种方式从下划线模板中获取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());将不起作用，因为下划线不会再识别<％=％>标签。
您可以将嵌套模板作为模板赋值中的变量传递给主模板，例如：
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});
操场
/////// TEMPLATES //////
var mainTemplate = "<ul>
<% _.each(items, function(item) { %>
<%= listItem({item:item}) %>
<% }); %>
<ul>";
var subTemplate = '<li><%=item %></li>';
/////// MODEL (our data) //////
var model = {
items : [1,2,3,4,5]
}
/////// COMPILE //////
// add the subTemplate to the model data, to be passed to the mainTemplate
model.listItem = _.template(subTemplate);
// Render main template to the DOM
document.body.innerHTML = _.template(mainTemplate, model);
而不是一次加载一个模板作为一个模板，然后尝试再次加载一部分，将它们分隔为多个模板。
拥有主文档模板和摘要模板。 初始负载拉入文档模板，然后拉入摘要模板并从第一个模板插入到编译的DOM中。 然后您可以随时重新加载第二个模板。 请参阅以下步骤：
1）加载初始模板，如下所示：
<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>
</script>
2）将其编译到DOM后，通过下划线加载第二个模板，如下所示：
<script type="text/template" id="summary-template">
<div id="summary">
<p>Total items: <%= totalitems %></p>
</div>
</script>
3）调用$（“＃document”）。append（summaryTemplate）或任何变量持有已编译模板。
4）无论何时需要重新加载摘要，重复步骤2和步骤3，除了首先删除现有的$（“＃summary”）之后再次追加
您也可以对这些项目使用相同的策略，只要确保使用正确的jQuery选择器/方法，以便以正确的顺序覆盖现有的div，因为append只能用于将某些内容添加到元件。
链接地址: http://www.djcxy.com/p/72069.html