underscore.js 嵌套模板 [英] underscore.js nested templates

问题描述

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

这个想法是我的应用程序需要呈现一个包含项目和摘要的循环的文档.我偶尔需要重新渲染摘要或几个项目，所以我不能只重新渲染整个文档.

但是，我想让应用用户为文档创建自己的模板时保持简单，我认为将所有内容保存在一个文档中会更容易.

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

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

我可以这样做吗:

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

附注.实际上，我正在使用 jQuery 的 $.get 从外部文件加载模板.通过这种方式，我将获得一个大字符串中的文档模板.从那里，我可以只做 documentTemplate = _.template(loadedString);.

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

解决方案

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

HTML:

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

JS:

 var renderSub = _.template( $('#sub_template').remove().text() ),renderMain = _.template( $('#main_template').remove().text());renderMain({num:5, renderSub:renderSub});

Is it possible to somehow take a DOM element from a underscore template and use it as another template?

The idea is that my app needs to render a document that contains a loop with items and a summary. I need to occasionaly re-render only the summary or a few items, so I cannot just re-render the whole document.

However, I would like to keep it simple for the app users to create their own templates for the document and I think that keeping everything in one file for a document would make it easier.

I'm trying to use something like this:

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

Now, I can easily do this var documentTemplate = _.template($('#document-template').html()); to turn this into a document template, but I would like to turn the summary part into a template and a list item into a template as well.

Can I do something like this:

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

PS. Actually I am loading the template from an external file using jQuery's $.get. This way I will get the document-template in one big string. From there, I can do just documentTemplate = _.template(loadedString);.

Now, if I could just extract the #summary element from the string, it should work. But when I try to convert the string to DOM element ( var domElement = $(loadedString)) (so I could do this: summaryTemplate = _.template($('#summary',domElement).html());, it won't work, because underscore won't recognize the <%= %> tags anymore.

解决方案

You can pass the nested template as a variable in the template assignments to the main template, e.g.:

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

这篇关于underscore.js 嵌套模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！