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});

Answer 2

Playground

/////// 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);

Answer 3

而不是将其作为一个模板一次性加载，然后尝试稍后再次加载它的一部分，而是将它们分离为多个模板。

有你的主文档模板和摘要模板。初始装入的是document-template，然后是summary-template，并将其插入到来自第一个模板的已编译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只会在元素的末尾添加一些东西。