Artikel ini adalah tutorial pengantar praktis untuk JSRender, yang contohnya menggambarkan titik -titik pengetahuan seperti menggunakan tag lain dan loop akses bersarang ke data orang tua. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Kata pengantar
JSRender adalah mesin template JavaScript berdasarkan jQuery. Ini memiliki fitur berikut:
・ Sederhana dan intuitif
・ Kuat
・ Diperpanjang
・ Secepat kilat
Fitur -fitur ini terlihat luar biasa, tetapi hampir setiap mesin templat akan diiklankan seperti ini. . .
Karena kebutuhan pekerjaan, Xiaocai bersentuhan dengan mesin templat ini. Setelah menggunakannya untuk sementara waktu, saya menemukan bahwa memang cukup kuat, tetapi Xiaocai merasa bahwa beberapa tempat terlalu kuat, yang membuat orang merasa sulit untuk dipahami.
Di sisi lain, dokumen resmi JSRender relatif terperinci, tetapi ada beberapa informasi lain yang mengejutkan. Jika Anda mengalami masalah, pada dasarnya Anda tidak dapat mencari. Anda tidak hanya dapat menemukan masalah terkait, tetapi hampir tidak ada hasilnya.
Selain itu, beberapa bagian JSRender memang sulit untuk dipahami, jadi saya sangat membutuhkan beberapa "praktik terbaik" untuk dibagikan.
Berdasarkan penggunaan baru -baru ini, Xiaocai telah merangkum beberapa pengalaman praktis, dan tentu saja, pengalaman ini tidak dapat ditemukan dalam dokumentasi resmi.
Loop bersarang untuk mengakses data orang tua menggunakan #parent (tidak disarankan)
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Nested Loop Menggunakan #Parent untuk Mengakses Data Orangtua --- oleh Yang Yuan </iteme>
<tyle>
</tyle>
</head>
<body>
<div>
<able>
<head>
<tr>
<TH> Nomor Seri </th>
<th> nama </t>
<th> anggota keluarga </t>
</tr>
</head>
<tbody id = "list">
</tbody>
</boable>
</div>
<Script src = "jQuery.min.js"> </script>
<skrip src = "jsviews.js"> </ptript>
<!-Tentukan template jsrender->
<skrip id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{untuk keluarga}}
{{!-Gunakan #parent untuk mengakses indeks induk-}}
<b> {{:#parents.parent.index + 1}}. {{:#index + 1}} </b>
{{!-Gunakan #parent untuk mengakses data induk, dan data induk disimpan dalam atribut data--}}
{{!-#data setara dengan ini-}}
{{: #data}} dari {{: #data}}
{{/untuk}}
</td>
</tr>
</script>
<script>
// Sumber Data
var datasrouce = [{
Nama: "Zhang San",
keluarga: [
"ayah",
"Ibu",
"kakak"
]
}, {
Nama: "Li Si",
keluarga: [
"kakek",
"nenek",
"paman"
]
}];
// memberikan data
var html = $ ("#testtmpl"). render (DataSrouce);
$ ("#Daftar"). Append (html);
</script>
</body>
</html>
Loop bersarang untuk mengakses data orang tua menggunakan parameter (disarankan)
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> loop bersarang menggunakan parameter untuk mengakses data orang tua --- oleh Yang Yuan </iteme>
<tyle>
</tyle>
</head>
<body>
<div>
<able>
<head>
<tr>
<TH> Nomor Seri </th>
<th> nama </t>
<th> anggota keluarga </t>
</tr>
</head>
<tbody id = "list">
</tbody>
</boable>
</div>
<Script src = "jQuery.min.js"> </script>
<skrip src = "jsviews.js"> </ptript>
<!-Tentukan template jsrender->
<skrip id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{!- Saat menggunakan loop untuk loop, Anda dapat menambahkan parameter sesudahnya. Parameter harus dimulai dengan ~, dan beberapa parameter dipisahkan oleh spasi--}}
{{!- Melalui parameter, kami menyimpan data induk. Dengan mengakses parameter di loop anak, kita dapat secara tidak langsung mengakses data induk--}}
{{untuk keluarga ~ parentIndex =#index ~ parentName = name}}
<b> {{: ~ ParentIndex + 1}}. {{:#index + 1}} </b>
{{!-#data setara dengan ini-}}
{{: #data}} dari {{: ~ ParentName}}
{{/untuk}}
</td>
</tr>
</script>
<script>
// Sumber Data
var datasrouce = [{
Nama: "Zhang San",
keluarga: [
"ayah",
"Ibu",
"kakak"
]
}, {
Nama: "Li Si",
keluarga: [
"kakek",
"nenek",
"paman"
]
}];
// memberikan data
var html = $ ("#testtmpl"). render (DataSrouce);
$ ("#Daftar"). Append (html);
</script>
</body>
</html>
Gunakan Lain di Tag Kustom (sangat tidak disarankan)
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Gunakan Lain di Tag Kustom --- oleh Yang Yuan </iteme>
<tyle>
</tyle>
</head>
<body>
<div>
<able>
<head>
<tr>
<th> nama </t>
<th> Harga satuan </t>
</tr>
</head>
<tbody id = "list">
</tbody>
</boable>
</div>
<Script src = "jQuery.min.js"> </script>
<skrip src = "jsviews.js"> </ptript>
<!-Tentukan template jsrender->
<skrip id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-IsShow adalah tag khusus, harga adalah parameter yang diteruskan, status adalah properti tambahan--}}
{{status harga isshow = 0}}
{{:harga}}
{{lain status harga = 1}}
-
{{/isShow}}
</td>
</tr>
</script>
<script>
// Sumber Data
var datasrouce = [{
Nama: "Apple",
Harga: 108
}, {
Nama: "Da Li",
Harga: 370
}, {
Nama: "Peach",
Harga: 99
}, {
Nama: "Pineapple",
Harga: 371
}, {
Nama: "Orange",
Harga: 153
}];
// Tag khusus
$ .views.tags ({
"isShow": function (harga) {
var temp = harga+''. split ('');
if (this.tagctx.props.status === 0) {
// menilai apakah harganya adalah jumlah bakung. Jika demikian, itu akan ditampilkan, jika tidak itu tidak akan ditampilkan.
if (harga == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3))) {
kembalikan this.tagctxs [0] .render ();
}kalau tidak{
kembalikan this.tagctxs [1] .render ();
}
}kalau tidak{
kembali "";
}
}
});
// memberikan data
var html = $ ("#testtmpl"). render (DataSrouce);
$ ("#Daftar"). Append (html);
</script>
</body>
</html>
Gunakan helper, bukan tag khusus (disarankan)
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Gunakan helper bukan tag khusus --- oleh Yang Yuan </iteme>
<tyle>
</tyle>
</head>
<body>
<div>
<able>
<head>
<tr>
<th> nama </t>
<th> Harga satuan </t>
</tr>
</head>
<tbody id = "list">
</tbody>
</boable>
</div>
<Script src = "jQuery.min.js"> </script>
<skrip src = "jsviews.js"> </ptript>
<!-Tentukan template jsrender->
<skrip id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-Gunakan asli jika untuk lompatan cabang, gunakan helper untuk pemrosesan logis--}}
{{if ~ isShow (harga)}}
{{:harga}}
{{kalau tidak}}
-
{{/jika}}
</td>
</tr>
</script>
<script>
// Sumber Data
var datasrouce = [{
Nama: "Apple",
Harga: 108
}, {
Nama: "Da Li",
Harga: 370
}, {
Nama: "Peach",
Harga: 99
}, {
Nama: "Pineapple",
Harga: 371
}, {
Nama: "Orange",
Harga: 153
}];
//Pembantu
$ .views.helpers ({
"isShow": function (harga) {
var temp = harga+''. split ('');
if (harga == (math.pow (parseInt (temp [0], 10), 3)+math.pow (parseInt (temp [1], 10), 3)+math.pow (parseInt (temp [2], 10), 3))) {
Kembali Benar;
}kalau tidak{
mengembalikan false;
}
}
});
// memberikan data
var html = $ ("#testtmpl"). render (DataSrouce);
$ ("#Daftar"). Append (html);
</script>
</body>
</html>
Klik di sini untuk mengunduh kode contoh lengkap.
Saya harap artikel ini akan membantu untuk pembelajaran pemrograman JSRender semua orang.