Penjelasan terperinci JsRender untuk penggunaan indeks gelung indeks

Contoh dalam artikel ini menerangkan penggunaan JsRender untuk indeks gelung indeks. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

JsRedner dan JsViews (JsViews ialah enkapsulasi lanjut berdasarkan JsRender) dipanggil generasi seterusnya templat Jquery, alamat rasmi:

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

Gelung ialah bahagian penting dalam enjin templat dan bercakap tentang gelung akan membawa kepada faktor penting: indeks.

Indeks yang dipanggil ialah bilangan kitaran melalui indeks, anda boleh mendapatkan bilangan kali kitaran semasa.

Jika pembaca telah membaca dokumentasi rasmi, mereka akan melihat kaedah berikut untuk mendapatkan indeks:

data:

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

penanda templat:

{{for names}}

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

{{/for}}

hasil:

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

Indeks boleh diperolehi melalui #indeks literal khas dalam gelung #data literal khas adalah bersamaan dengan ini dalam kes ini mewakili setiap nama.

Seterusnya mari kita lakukan sedikit helah, masih contoh di atas, tetapi kali ini saya mahu hanya memaparkan nama bermula dengan M:

data:

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

penanda templat :

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

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

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

hasil:

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

Saya hanya menambah jika penghakiman, tetapi ralat telah dilaporkan!

Masalahnya terletak pada #index Mesej ralat sangat jelas, meminta anda menggunakan #getIndex() dan bukannya #index.

Cuba kod yang diganti:

data:

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

penanda templat:

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

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

hasil:

1. Maradona
4. Messi

Kenapa ni? Ringkasnya, ia adalah kerana walaupun {{jika }} tidak mencipta skop data biasa, ia mengganggu skop tersembunyi. Iaitu, {{jika }} tidak akan menyekat keterlihatan data biasa (data yang anda masukkan), tetapi ia akan mengganggu keterlihatan data tersembunyi (#index, #parent). Ini adalah pemahaman yang mudah, dan tidak perlu pergi ke butiran, kerana ini hanyalah kecacatan rangka kerja ini, bukan piawaian.

Oleh itu, artikel ini memberikan pembaca kesimpulan yang sangat penting: cuba gunakan #getIndex() untuk mendapatkan indeks, dan elakkan menggunakan #index melainkan aplikasi anda cukup mudah.

Saya harap bab ini akan membantu semua orang untuk mempelajari JsRender Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video jQuery!