Artikel ini menjelaskan JSRender untuk indeks indeks indeks. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
JSREDNER dan JSVIEWS (JSVIEWS adalah enkapsulasi lebih lanjut berdasarkan JSRender) disebut generasi berikutnya dari Templat JQuery, alamat resmi:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews.
Loop adalah bagian penting dari mesin templat, dan ketika datang ke loop, faktor penting diperkenalkan: pengindeksan.
Indeks yang disebut adalah jumlah loop. Melalui indeks, Anda bisa mendapatkan loop saat ini berapa kali.
Jika pembaca telah membaca dokumen resmi, mereka akan melihat cara -cara berikut untuk mendapatkan indeks:
data:
Salin kode sebagai berikut: {
Nama: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template Markup:
Salin kode sebagai berikut: {{untuk nama}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/untuk}}
hasil:
Salin kode sebagai berikut: 1. Maradona
2. Pele
3. Ronaldo
4. Messi
Indeks dapat diperoleh dalam loop dengan #index literal khusus, yang setara dengan ini, dan dalam hal ini mewakili setiap nama.
Selanjutnya, mari kita buat beberapa trik, dan contoh di atas, tapi kali ini saya berharap hanya menampilkan nama yang dimulai dengan m:
data:
Salin kode sebagai berikut: {
Nama: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template Markup:
Salin kode sebagai berikut: {{untuk nama}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/jika}}
{{/untuk}}
hasil:
Salin kode sebagai berikut: tidak tersedia (tampilan bersarang): gunakan #getIndex () 1. Maradona
Tidak tersedia (tampilan bersarang): Gunakan #getIndex () 1. Messi
Saya hanya menambahkan penilaian IF dan itu benar -benar melaporkan kesalahan!
Masalahnya terletak pada #index. Pesan kesalahan sangat jelas. Anda dapat menggunakan #GetIndex () bukan #Index.
Coba kode yang diganti:
data:
Salin kode sebagai berikut: {
Nama: ["Maradona", "Pele", "Ronaldo", "Messi"]
}
Template Markup:
Salin kode sebagai berikut: {{untuk nama}}
{{if #data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex ()+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/jika}}
{{/untuk}}
hasil:
Salin kode sebagai berikut: 1. Maradona
4. Messi
Mengapa ini? Sederhananya, itu karena meskipun {{if}} tidak membuat ruang lingkup data biasa, itu mengganggu ruang lingkup tersembunyi. Yaitu, {{if}} tidak akan memblokir visibilitas data reguler (data yang Anda lewati), tetapi akan mengganggu visibilitas data tersembunyi (#Index, #parent). Ini adalah pemahaman yang sederhana, dan tidak perlu masuk ke dalamnya, karena ini hanyalah cacat dari kerangka kerja ini, bukan standar.
Oleh karena itu, artikel ini memberi pembaca kesimpulan penting: cobalah menggunakan #getIndex () untuk mendapatkan indeks dan menghindari menggunakan #Index kecuali aplikasi Anda cukup sederhana.
Saya harap artikel ini akan membantu pembelajaran JSRender semua orang.