如何在内容模板循环上重新使用页眉,页脚模板

时间:2014-09-25 13:00:22

标签: jquery templates underscore.js underscore.js-templating

我对underscore模板不太熟悉。我正在尝试打印一个包含3个内容元素的页面,每个元素包含3个数据。

content中的每一个都需要有一个标题和继续元素。最后一个应该有页脚模板而不是继续。

我根本不知道如何实现这一点......任何人都可以帮助我吗?

这是我的尝试:

<script type="text/template" id="header">
    <div id="header">
        <h6>this is Header</h6>
        <span><% students.name[0] %></span>
   </div>
</script>
<script type="text/template" id="content">
    <div id="content">
    <h6>Content</h6>
    <% _.each(students, function (item, index) { %>
        <% if(index % 3 == 0 ) { %>
           <% return $('#header').html() %>
        <% } %>
        <li><%= item.name %></li>
    <% }) %>
            </div>
</script>

<script type="text/template" id="continue">
     <span>Continue....</span>
</script>

<script type="text/template" id="footer">
    <div id="footer>
    <span>End of Document</span>
</div>
</script>

没有运气。请帮帮我吗?

Live Demo

1 个答案:

答案 0 :(得分:2)

在我看来,您的主要问题是如何递归评估模板。这很好,您只需要小心使用<%= %>而不是<% %>,并在父模板调用时传递它们应该访问的任何参数。

// http://jsfiddle.net/uwmbznxb/1/
<script type="text/template" id="header">
<div id="header">
    <h6>this is Header</h6>
    <span><%= name[0] %></span>
</div>
</script>
<script type="text/template" id="content">
   <div id="content">
   <h6>Content</h6>
   <% _.each(students, function (item, index) { %>
        <% if(index % 3 == 0 ) { %>
            <% if (index) { %>
                   <%= _.template($('#continue').html())(item) %>
            <% } %>
           <%= _.template($('#header').html())(item) %>
        <% } %>
        <li><%= item.name %></li>
    <% }) %>
        <%= _.template($('#footer').html())({}) %>
            </div>
 </script>
 // other templates ..