Terokai cara menggunakan kemahiran mustache.js_javascript enjin template Javascript

Kami akan menerangkan secara terperinci cara menggunakan enjin templat JavaScript ringan Mustache.js.

Contoh mudah

function show(t) {
 $("#content").html(t);
}
var view = {
 title: 'YZF',
 cacl: function () {
 return 6 + 4;
 }
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

Anda boleh melihat dengan jelas sintaks templat Misai Anda hanya perlu menggunakan {{ dan }} untuk memasukkannya dan meletakkan nama objek di dalamnya.

Ia juga boleh dilihat daripada contoh ini bahawa jika atribut yang ditentukan ialah fungsi, kandungan dalam fungsi itu tidak akan dikeluarkan, sebaliknya, fungsi itu akan dilaksanakan terlebih dahulu, dan kemudian hasil yang dikembalikan akan dipaparkan.

Jangan lari dari tag HTML

var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

Seperti yang anda boleh lihat daripada contoh ini, Misai akan melepaskan teg html dalam nilai secara lalai, tetapi kadangkala kami tidak memerlukannya.

Jadi di sini kita boleh menggunakan {{{ dan }}} untuk memasukkannya, atau {{ dan }} untuk memasukkannya, maka Misai tidak akan terlepas daripada teg html di dalamnya.

Ikat nilai sub-harta itu

var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

Saya percaya bahawa apabila anda melihat contoh pertama, seseorang akan memikirkan sama ada anda boleh mengikat sub-sifat, jika anda melihat dengan cukup keras. Jadi tahniah, sekarang adalah cara untuk menyelesaikan keperluan anda, hanya gunakan sub-property melalui .

Pemilihan bersyarat sama ada untuk memaparkan bahagian yang ditentukan

var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

Selalu ada masalah Jika kita masih perlu membuat keputusan sama ada untuk membuat bahagian tertentu berdasarkan nilai yang kita berikan, maka kita boleh menyelesaikan masalah ini sekarang bukan hanya palsu yang akan menyebabkan bahagian yang dinyatakan tidak akan diberikan.

null, tatasusunan kosong, 0, rentetan kosong adalah sama sah. Sintaksnya agak mudah, cuma gunakan {{#key}} ... {{/key}} untuk mengawal kandungan di tengah.

Keluaran gelung

var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

Hanya belajar kaedah di atas, dan anda akan menyelesaikan kebanyakan masalah, tetapi masih akan ada masalah, yang merupakan output gelung Jika anda menulis satu per satu, saya percaya ia akan menjadi sangat menjengkelkan tidak akan mengecewakan kita, ia juga menunjukkan cara untuk menggelungkan output Di sini kita mengeluarkan tatasusunan yang terdiri daripada objek Jika kita mengeluarkan tatasusunan, kita perlu menggunakan {{.}} dan bukannya {{nama}}.

Gelung dan keluarkan nilai yang dikembalikan selepas diproses oleh fungsi yang ditentukan

var view = {
 "beatles": [
 { "firstname": "Johh", "lastname": "Lennon" },
 { "firstname": "Paul", "lastname": "McCartney" }
 ],
 "name": function () {
 return this.firstname + this.lastname;
 }
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

Output gelung tersedia, tetapi kami masih mahu memprosesnya kemudian. Kemudian ini memenuhi keperluan anda sepenuhnya, kerana Misai akan menghantar nilai dalam tatasusunan kepada fungsi anda dan mengeluarkan nilai yang dikembalikan oleh fungsi anda. Di sini kita boleh melihat bahawa lapisan paling luar ialah tatasusunan Selagi fungsi digunakan di dalam, tatasusunan luar akan dihantar masuk sebagai parameter fungsi ini.

Fungsi tersuai

var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

Kita semua menggunakan pembolehubah seperti bahagian di atas, jadi apakah kesannya jika kita menggunakan fungsi sebagai bahagian sekarang?

Ia akan memanggil fungsi yang dikembalikan oleh fungsi kami, mengambil rentetan asal di tengah bahagian sebagai parameter pertama, dan penterjemah lalai sebagai parameter kedua, kemudian kami boleh memprosesnya sendiri.

Pesta Antonim

var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

Kami juga menggunakan bahagian di atas, tetapi kami hanya boleh memilih sama ada untuk mengeluarkan bahagian tertentu. Jadi di sini kita menebusnya.

Jika kita menggunakan {{^ dan }} untuk mentakrifkan bahagian, maka bahagian ini hanya akan dipaparkan apabila nilai di dalamnya kosong, kosong, tatasusunan kosong atau rentetan kosong. Kemudian kita boleh mencapai kesan jika lain.

Sesetengah templat

var view = {
 names: [
 { "name": "y" },
 { "name": "z" },
 { "name": "f" }
 ]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Walaupun Misai menjimatkan banyak masa, kami telah menentukan banyak templat, tetapi ia tidak boleh bersarang dan digunakan antara satu sama lain, yang juga menyusahkan.

Jadi di sini kami juga memperkenalkan cara untuk menentukan beberapa templat untuk digunakan dalam templat lain Cara untuk menggunakan templat lain di sini hanyalah {{>templetename}}.

Perbezaan terbesar ialah kaedah Mustache.render mempunyai parameter ketiga.

Templat prapenyusun

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

Sedangkan templat mempunyai kelebihan dan kekurangan. Ia hanya mengambil masa untuk menyusun templat, jadi jika kami tahu bahawa kami akan menggunakan templat tertentu, kami boleh pra-kompil templat untuk kegunaan kemudian.

Saya harap artikel ini akan membantu pembelajaran semua orang.