Artikel ini secara singkat menjelaskan sintaks dasar JSRender untuk objek. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Sebagai mesin template JavaScript, JSRender sangat penting untuk memiliki fungsi loop, yaitu. Namun, karena JSRender terlalu fleksibel, karena sebenarnya dapat menerima objek sebagai objek loop.
Keduanya {{untuk array}} dan {{untuk objek}} diizinkan. Semua orang dapat memahami {{untuk array}}, yaitu melintasi array dan mengambil setiap elemen satu per satu. Tapi {{untuk objek}} agak luar biasa, dan dokumentasi resmi hanya memberikan contoh yang tidak membantu, tanpa penjelasan.
Pada awalnya, Xiaocai berpikir bahwa tujuan {{untuk objek}} adalah untuk melintasi semua properti objek, tetapi jika Anda memikirkannya dengan cermat, fungsi ini {{{props objek}} telah diimplementasikan. Fungsi tag props adalah untuk melintasi semua sifat objek. Jumlah properti yang ada, berapa kali akan dililitkan. Setiap loop akan memiliki dua properti tersembunyi: kunci, prop, kunci mewakili nama atribut, dan prop mewakili nilai atribut, yang sangat nyaman untuk digunakan.
Faktanya, {{untuk objek}} bukan loop, itu dapat dipahami sebagai masuk (ke dalam), yaitu memasuki lingkungan objek dan menetapkan konteks saat ini ke objek, mirip dengan dengan inang di stang.
Misalnya:
data:
Salin kode sebagai berikut: {
"Judul": "The A Team",
"Anggota": [
{
"Nama": "Pete",
"City": "Member_City",
"alamat": {
"kota": "address_city",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}
Template Markup:
Salin kode sebagai berikut: {{untuk anggota}}
{{untuk alamat}}
<p>. {{: city}} </p>
{{/untuk}}
{{/untuk}}
hasil:
Salinan kode adalah sebagai berikut: address_city
Dari hasilnya, kita dapat melihat bahwa meskipun item anggota juga memiliki atribut kota, karena mereka memasukkan objek yang ditunjukkan oleh alamat melalui {{untuk alamat}}, {{: city}} secara langsung diperoleh dari alamat.
Pada saat yang sama, alamat memiliki tiga properti, tetapi hanya satu baris yang merupakan hasil sebagai hasilnya, membuktikan bahwa {{untuk objek}} tidak mengulang, hanya beralihnya ini.
Saya harap artikel ini akan membantu untuk pembelajaran pemrograman JSRender semua orang.