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>

现在,我可以轻松地将此变量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

操场

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