循環是模版引擎必不可少的一部分,而說起循環,會引出一個至關重要的因素:索引。
所謂索引,即循環次數,通過索引,可以擷取目前循環是第幾次。
如果讀者閱讀過官方文檔,會見到如下擷取索引的方式:
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. Maradona
2 2. Pele
3 3. Ronaldo
4 4. Messi
索引可以在循環中通過特殊字面量#index擷取,特殊字面量#data相當于this,在本例中表示每一個name。
接下來我們搞點小花樣,還是上邊的例子,隻不過這次我希望隻顯示以M開頭的名字:
1 {
2 names: ["Maradona","Pele","Ronaldo","Messi"]
3 }
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}}
1 Unavailable (nested view): use #getIndex()1. Maradona
2 Unavailable (nested view): use #getIndex()1. Messi
簡單加了個if判斷,竟然報錯了!
問題就出在#index上,錯誤提示很明确,讓你用#getIndex()代替#index。
試試替換後的代碼:
1 {
2 names: ["Maradona","Pele","Ronaldo","Messi"]
3 }
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}}
1 1. Maradona
2 4. Messi
這是為什麼呢?簡單說,就是因為{{if }}雖然不建立正常資料作用域,但卻幹擾了隐藏作用域。也就是說,{{if }}不會阻斷正常資料(你傳入的資料)的可見性,但會幹擾隐藏資料(#index、#parent)的可見性。這樣簡單了解就可以了,不必深究,因為這僅僅是此架構的缺陷,并不是标準。
是以,本文給讀者一個很重要的結論:盡量使用#getIndex()擷取索引,避免使用#index,除非你的應用足夠簡單。