0

大家好，我正在用 javascript (backbone.js) 进行分页，这是整体模板：( http://jsfiddle.net/LQg7W/2151/这个 jsfiddle 当然没有 css）

 <ul class="pagination">
        <li class="arrow unavailable"><a href="">Previous</a></li>
        <li class="current"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li class="unavailable"><a href="">&hellip;</a></li>
        <li><a href="">12</a></li>
        <li><a href="">13</a></li>
        <li class="arrow"><a href="">Next</a></li>
      </ul>

假设我想要 10 页，所以我想用 for 循环限制一定数量的页面。所以我正在尝试更改上面的代码，但是我编写的代码不起作用，并且 javascript 部分有问题。由于我在一个复杂的系统中工作，因此错误并没有说太多。任何想法？

<ul class="pagination">
        <li class="arrow unavailable"><a href="">Previous</a></li>
        <li class="current"><a href="">1</a></li>
         <% 
            for(var i = 0; i < 10; ++i){ %>
                <li><a href="">i</a></li>
            <%  }
        }
    %>

        <li class="arrow"><a href="">Next</a></li>
      </ul>
4

1 回答 1

1

在模板中迭代：

<script type="text/template" id="test">
    <% for(var i = 0; i < 10; i++){ %>
        <% if(i === 0){ %>
            <li><a href="">First value</a></li>
        <% } else if(i > 0 && i < 9){ %>
            <li><a href=""> <%= i+1%> </a></li>
        <% } else { %>
            <li><a href="">Last value</a></li>
        <% } %>
    <% } %>
</script>

虽然这只是提取迭代值并且不反映您的结果，但您应该将某种结果对象传递给模板并对其进行操作：

HTML:
<ul class="pagination"></ul>

JS:
var compiled = _.template($('#test').html());
$('.pagination').html( compiled({offset:0,max:10,total:100}) )

然后更新模板以使用这些值。

编辑：

因此，如果您有 10000 个页面并将它们全部传递给模板jsfiddle：

$('.pagination').html( compiled({pages:['page1','page2', ..., 'page10000']}) )

// update template
<script type="text/template" id="test">
    <% _.each(pages,function(page,i){ %>
        <% if(i === 0){ %>
            <li><a href="<%= page %>">First</a></li>
        <% } else if(i > 0 && i < 5){ %>
            <li><a href="<%= page %>"> <%= i+1 %> </a></li>
        <% } else if(i > 4 && i < (pages.length - 5) && i < 6){ %>
            <li class="unavailable"><a href=""> &hellip; </a></li>
        <% } else if(i > (pages.length - 6) && i !== (pages.length - 1) ){ %>
            <li><a href="<%= page %>"> <%= i+1 %> </a></li>
        <% } else if((pages.length - 1) === i){ %>
            <li><a href="<%= page %>">Last</a></li>
        <% } %>
    <% }) %>
</script>
于 2013-09-15T10:40:59.313 回答