Ada banyak opsi untuk template open source node, tetapi disarankan agar orang tua seperti saya menggunakan EJS. Wajar untuk menggunakan EJS dengan pengalaman dalam ASP/PHP/JSP klasik. Dengan kata lain, Anda dapat mengatur kode JavaScript di <%...%> blok dan menggunakan <%= output variabel%> dengan cara yang paling tradisional (selain itu, <%-variabel output tidak akan luput dari simbol seperti &). Perintah instalasi EJS adalah sebagai berikut:
NPM Instal EJS
Panggilan js
Ada dua metode utama yang disebut JS:
ej.comcile (str, opsi); // => fungsi ejs.render (str, opsi); // => str
Faktanya, EJS dapat digunakan secara independen dari Express, misalnya:
var ejs = membutuhkan (''), str = membutuhkan ('fs'). readfileSync (__ dirname + '/list.ejs', 'utf8'); var ret = ej.render (str, {names: ['foo', 'bar', 'baz']}); console.log (ret); Lihat ej.render (). Parameter pertama adalah string templat, dan template adalah sebagai berikut. < %if (name.length) { %> <ul> < %name.foreach (function (name) { %> <li foo = '< %= name + "'" %> '> < %= name %> </li> < %}) %> </ul> < %} %>Nama menjadi variabel lokal.
Parameter Opsi
Parameter kedua adalah data, yang biasanya merupakan objek. Objek ini dapat dianggap sebagai opsi, yang berarti bahwa data dan seleksi berada pada objek yang sama.
Jika Anda tidak ingin memiliki disk setiap saat, Anda perlu menangani template dan mengatur opsi.filename. Misalnya:
var ejs = membutuhkan ('../'), fs = membutuhkan ('fs'), path = __dirname + '/functions.ejs', str = fs.readfileSync (path, 'utf8'); var users = []; Users.push ({name: 'tobi', usia: 2, spesies: 'ferret'}) user.push ({name: 'loki', usia: 2, spesies: 'ferret'}) pengguna.push ({name: 'jane', usia: 6, spesies: 'ferret'}) var ret = {ejender '(evene: 6, ferret: {{{{{{{{{{{{{{{{{{{{{{{{{{ferret', console.log (ret);perintah inculde
Dan, jika Anda mau
<ul> < % user.foreach (function (user) { %> < % termasuk pengguna/show %> < %}) %> </ul>Secara umum, memasukkan templat umum, yaitu memperkenalkan file, Anda harus mengatur opsi nama file untuk memulai fitur termasuk, jika tidak termasuk tidak akan tahu direktori di mana ia berada.
templat:
<h1> pengguna </h1> < %fungsi pengguna (pengguna) { %> <li> <strong> < %= user.name %> </strong> adalah < %= user.age %> tahun < %= user.species %>. </li> < %} %> <ul> < %user.map (user) %> </ul> < %} %> <ul> < %user.map (user) %> </ul> < %} %> <ul> < %user.map (user) %> </ul>EJS mendukung kompilasi templat. Setelah kompilasi template, tidak ada operasi IO, itu akan sangat cepat dan dapat digunakan untuk variabel lokal. Contoh berikut pengguna/show mengabaikan ekstensi EJS:
<ul> < % user.foreach (function (user) { %> < % termasuk pengguna/show %> < %}) %> </ul>Token Tutup Kustom
Jika Anda berencana untuk menggunakan <h1> {{= title}} </h1> Umumnya non-<%%> tag, Anda juga dapat menyesuaikannya.
var ejs = membutuhkan ('ejs'); ejs.open = '{{'; ejs.close = '}}'; Output format juga OK. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Ditelepon:<p> <%=: pengguna | %terakhir> </p>EJS juga mendukung lingkungan browser.
<html> <head> <script src = "../ ej.js"> </script> <skrip id = "pengguna" type = "text/template"> < %if (name.length) { %> <ul> < %name.foreach (name) { %> <li> < %= name %= </li> < %} (name) { %> <li> < %= name %= </Li> </} name} </{ %> <si> < %= name> </Li> </} < %{ %> < %> <preps> <pript> < %> < %> < %> < %{ %> < %> < %{ %> < %> < %> function () {var users = document.getElementById ('users'). innerHtml; var name = ['loki', 'tobi', 'Jane']; var html = ej.render (pengguna, {nama: nama}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> Saya ingin tahu apakah EJS dapat mengeluarkan objek JSON multi-lapis?Ngomong-ngomong, beberapa netizen mengungkapkan bahwa JQ Master John menulis templat 20-line beberapa tahun yang lalu, yang malu, mirip dengan EJS tetapi pendek dan ringkas!
Mesin template JS sederhana dan praktis
Mesin template JS dengan kurang dari 50 baris mendukung berbagai sintaks JS:
<skrip id = "test_list" type = "text/html"> <%= for (var i = 0, l = p.list.length; i <l; i ++) {var stu = p.list [i]; =%> <tr> <td <%= if (i == 0) {=%> <%=} =%>> <%== Stu.name =%> </td> <td> <%== stu.age =%> </td> <t%== (Stu.Address || '' ') = </td = <%== (Stu."<%= xxx =%>" adalah kode logika JS, dan "<%== xxx =%>" adalah variabel output langsung, mirip dengan fungsi gema dalam php. "P" adalah parameter objek KV saat memanggil metode pembuatan berikut. Itu juga dapat diatur ke nama parameter lain saat memanggil "JTemp baru"
Ditelepon:
$(function(){ var temp = new JTemp('test_list'), html = temp.build( {list:[ {name:'Zhang San', age:13, address:'Beijing'}, {name:'Li Si', age:17, address:'Tianjin'}, {name:'Wang Wu', age:13} ]}); $ ('Tabel'). html (html);Setelah suhu di atas dihasilkan, metode build dapat dipanggil beberapa kali untuk menghasilkan HTML. Berikut kode untuk mesin template:
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // informasi konfigurasi, dalam kebanyakan kasus, this.htmlid = htmlid; this.fun; this.oname = p.oname || 'P'; this.temp_s = p.temps || '<%='; this.temp_e = p.tempe || '=%>'; this.getFun (); } Temp.prototype = {getFun: function () {var _ = this, str = $ ('#' + _.htmlid) .html (); if (! str) _.err ('Kesalahan: tidak ada temp !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexof (_. Temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; untuk (; s> = 0;) {e = str.indexof (_. Temp_e); if (e <s) ware (':( kesalahan !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (S +Sl, E); if (p.indexof ('=')! == 0) {//JS Laporan/p. P.Substring (1) + ';'; Fs);Inti adalah untuk mengubah kode templat menjadi fungsi yang menyambungkan string, dan setiap kali Anda mengambil fungsi panggilan data.
Karena ini terutama digunakan untuk ponsel (webkit), efisiensi splicing string tidak dipertimbangkan. Jika perlu digunakan oleh IE, yang terbaik adalah mengubah metode splicing string ke bentuk array.push ().
tata tata tata letak template ejs
1. Jika Anda tidak mau menggunakan tata letak default.EJS, Anda dapat menentukannya sendiri. Misalnya:
res.render ("index", {"title": "test", "tata letak": "main"}); // atau res.render ("index", {"title": "test", "tata letak": "main.ejs"});2. Jika Anda tidak mau menggunakan tata letak, Anda dapat mengatur tata letak ke false, misalnya:
res.render ("index", {"tata letak": false});3. Jika Anda tidak ingin setiap permintaan diatur secara terpisah. Pengaturan global dapat digunakan:
app.set ("Opsi Lihat", {"tata letak": false});4. Di EJS, tag penutupan default adalah < % .. %>, dan kami juga dapat menentukan tag kami sendiri. Misalnya:
app.set ("Lihat opsi", {"buka": "{{", "tutup": "}}"});5. Tata letak lokal
Dalam aplikasi web, seringkali perlu untuk menampilkan konten tertentu berulang kali, seperti fungsi komentar pengguna, yang membutuhkan tampilan berulang dari komentar masing -masing pengguna. Pada saat ini, kita dapat mencapainya melalui loop. Namun, ini juga dapat diimplementasikan menggunakan [templat parsial] (parsial). Misalnya:
Pertama, kami membuat template lokal./views/comment.ejs:
<div> <div> <%= Comment.User%> </div> <div> <%= comment.content%> </div> </div>
Catatan: Ini adalah komentar.xxxx
Kemudian di ./views/index.ejs, hubungi komentar melalui parsial
Ini <%= judul%>! <br/> <%- parsial ("komentar", komentar)%>Catatan: Berikut ini parsial ("Comment.ejs", komentar); <- Kata itu harus jamak.
Akhirnya, di router, hubungi index.ejs.
app.get ("/", function (req, res) {res.render ("index", {"title": "test", "tata letak": false, "komentar": [{"pengguna": "gainover", "konten": "test1"}, {"pengguna": "zongzi", "konten": "test1"} {"user": "zongzi", "content": "test1"} {"user": "zongzi", "content": "test2"} {"user": "zongzi", "content": "test2"} ]});Catatan: Komentar dalam kode sama dengan nama variabel komentar index.ejs, dan dalam komentar.ejs dipanggil oleh parsial, bentuk komentar tunggal digunakan.
Ketika daftar ditampilkan, skenario yang biasanya kami temui adalah menampilkan elemen pertama atau elemen terakhir secara khusus. Sebagian, kita dapat menggunakan variabel bawaan di Express untuk menentukan apakah objek saat ini adalah elemen pertama atau elemen terakhir, misalnya:
<div> <div> <%= Comment.User%> </div>: <piv> <%= comment.content%> </div> </div>
Dengan cara ini, akan ada FirstItem ekstra di kelas komentar pertama.
Variabel bawaan yang serupa meliputi:
(1) Firstincollection benar jika itu adalah elemen pertama dari array
(2) IndexIncollection Indeks elemen saat ini dalam array
(3) LastIncollection benar jika itu adalah elemen terakhir dari array
(4) CollectionLength
Akhirnya, ada masalah pencarian jalur ketika sebagian memanggil templat:
(1) Parsial ("Edit") akan mencari file edit.ejs di direktori yang sama.
(2) parsial ("../ pesan") akan mencari file pesan.ejs dari direktori level sebelumnya.
(3) Parsial ("Pengguna") akan mencari file pengguna.EJS. Jika Users.ejs tidak ada, file /users/index.ejs akan dicari.
(4) < %= pengguna %> akan luput dari konten. Jika Anda ingin menghindarinya, Anda dapat menggunakan < %- pengguna %>