用javascript設置值的問題

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>