JsRender for index 迴圈索引使用說明

標籤：style   blog   color   ar   使用   for   sp   strong   資料   

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

     所謂索引，即迴圈次數，通過索引，可以擷取當前迴圈是第幾次。

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

data:

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

template markup:

1 {{for names}}2   <div>3     <b>{{: #index+1}}.</b>4     <span>{{: #data}}</span>5   </div>6 {{/for}}

result:

1 1. Maradona2 2. Pele3 3. Ronaldo4 4. Messi

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

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

data:

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

template markup:

1 {{for names}}2   {{if #data.indexOf("M") == 0}}3     <div>4       <b>{{: #index+1}}.</b>5       <span>{{: #data}}</span>6     </div>7   {{/if}}8 {{/for}}

result:

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

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

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

     試試替換後的代碼：

data:

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

template markup:

1 {{for names}}2   {{if #data.indexOf("M") == 0}}3     <div>4       <b>{{: #getIndex()+1}}.</b>5       <span>{{: #data}}</span>6     </div>7   {{/if}}8 {{/for}}

result:

1 1. Maradona2 4. Messi

     這是為什麼呢？簡單說，就是因為{{if }}雖然不建立常規資料範圍，但卻幹擾了隱藏範圍。也就是說，{{if }}不會阻斷常規資料(你傳入的資料)的可見度，但會干擾隱藏資料(#index、#parent)的可見度。這樣簡單理解就可以了，不必深究，因為這僅僅是此架構的缺陷，並不是標準。

     因此，本文給讀者一個很重要的結論：盡量使用#getIndex()擷取索引，避免使用#index，除非你的應用足夠簡單。

 

JsRender for index 迴圈索引使用說明