Question

你好我们在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>

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

用javascript设置值的问题

1 个答案: