JsRender for index迴圈索引用法詳解

本文實例講述了JsRender for index循環索引用。分享給大家供大家參考。具體分析如下：

JsRedner和JsViews（JsViews是再JsRender基礎上的進一步封裝）被稱為下一代的Jquery模板，官方地址：

https://github .com/BorisMoore/jsrender;
https://github.com/BorisMoore/jsviews。

循環是模版引擎必不可少的一部分，而說起循環，會引出一個至關重要的因素：索引。

所謂索引，即循環次數，透過索引，可以取得目前循環是第幾次。

如果讀者閱讀過官方文檔，會見到以下取得索引的方式：

data:

{
   names: ["Maradona","Pele","Ronaldo","Messi"]
}

template markup:

{{for names}}

{{: #index+1}}.
{{: #data}}

{{/for}}

template markup:

1. Maradona
2. Pele
3. Ronaldo
4. Mess

result:

索引可以在循環中通過特殊字面量#index獲取，特殊字面量#data相當於this，在本例中表示每一個name 。

接下來我們搞點小花樣，還是上邊的例子，只不過這次我希望只顯示以M開頭的名字：

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

data:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    

       {{: #index+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

template markup:

Unavailable (nested view): use #getIndex()1. Maradona
Unavailable (nested view): use #getIndex()1. Messi

result:

簡單加了if判斷，竟然報錯了！

問題就出在#index上，錯誤提示很明確，讓你用#getIndex()代替#index。

試試替換後的程式碼：

{
 names: ["Maradona","Pele","Ronaldo","Messi"]
}

data:

{{for names}}
   {{if #data.indexOf("M") == 0}}
    
       {{: #getIndex()+1}}.
       {{: #data}}
    

   {{/if}}
 {{/for}}

template markup:

1. Maradona
4. Messi

result:

result:

result:result:result: 這是為什麼呢？簡單說，就是因為{{if }}雖然不建立常規資料作用域，但卻幹擾了隱藏作用域。也就是說，{{if }}不會阻斷常規資料(你傳入的資料)的可見性，但會幹擾隱藏資料(#index、#parent)的可見性。這樣簡單理解就可以了，不必深究，因為這只是這個框架的缺陷，並不是標準。 因此，本文給讀者一個很重要的結論：盡量使用#getIndex()取得索引，避免使用#index，除非你的應用夠簡單。 希望本章所述對大家JsRender的學習有所幫助，更多相關教程請訪問jQuery視頻教程！