Saya mencoba mempelajari tentang penggunaan baru javascript sebagai bahasa serveride dan sebagai bahasa fungsional. Beberapa hari yang lalu saya mendengar tentang node.js dan framework express. Lalu saya melihat tentang underscore.js sebagai satu set fungsi utilitas. Saya melihat pertanyaan ini di stackoverflow . Dikatakan kita dapat menggunakan underscore.js sebagai mesin templat. ada yang tahu tutorial yang baik tentang cara menggunakan underscore.js untuk templating, terutama untuk biginners yang memiliki lebih sedikit pengalaman dengan javascript canggih. Terima kasih
262
Jawaban:
Semua yang perlu Anda ketahui tentang template garis bawah ada di sini . Hanya 3 hal yang perlu diingat:
<% %>
- untuk menjalankan beberapa kode<%= %>
- untuk mencetak beberapa nilai dalam template<%- %>
- untuk mencetak beberapa nilai HTML lolosItu saja.
Contoh sederhana:
maka
tpl({foo: "blahblah"})
akan diberikan ke string<h1>Some text: blahblah</h1>
sumber
sumber
text/html
jadi mengatakantype="text/html"
itu bohong, kebohongan dapat menyebabkan masalah. Anda akan lebih baik dengan tipe yang akurat sepertitext/x-underscore
.type="foo/bar"
karena saya ingin semua orang tahu bahwa itu tidak masalah asalkan browser / server tidak mengenalinya dan mencoba untuk melakukan sesuatu dengannya. Karena html bukan jenis skrip, saya merasa cukup aman dengan teks / html (John Resig menggunakannya) foo / bar juga berfungsi :)*/x-*
tipe untuk penggunaan "buatan", saya tidak berpikir adatext/underscore
tipe dalam pendaftar resmi jadi saya menggunakantext/x-underscore
karena saya paranoid dan mereka benar-benar keluar untuk mendapatkan saya.Dalam bentuk yang paling sederhana, Anda akan menggunakannya seperti:
Jika Anda akan menggunakan template beberapa kali, Anda ingin mengompilasinya sehingga lebih cepat:
Saya pribadi lebih suka sintaks gaya Kumis. Anda dapat menyesuaikan penanda token template untuk menggunakan kurung kurawal ganda:
sumber
interpolate
tip Anda tidak berfungsi, tetapi ini berhasil:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
Dokumentasi untuk templating sebagian, saya memperhatikan sumbernya.
Fungsi _.template memiliki 3 argumen:
Jika tidak ada data (atau nol) yang diberikan, maka fungsi render akan dikembalikan. Ada 1 argumen:
Ada 3 pola regex dan 1 parameter statis dalam pengaturan:
Kode dalam mengevaluasi bagian akan hanya dievaluasi. Anda dapat menambahkan string dari bagian ini dengan perintah __p + = "mystring" ke templat yang dievaluasi, tetapi ini tidak disarankan (bukan bagian dari antarmuka templating), gunakan bagian interpolasi alih-alih itu. Jenis bagian ini untuk menambahkan blok seperti jika atau untuk templat.
Hasil kode di bagian interpolasi akan ditambahkan ke templat yang dievaluasi. Jika null diberikan kembali, maka string kosong akan ditambahkan.
Bagian melarikan diri lolos dari html dengan _.escape pada nilai kembali dari kode yang diberikan. Jadi mirip dengan _.escape (kode) di bagian interpolasi , tetapi ia lolos dengan \ karakter spasi seperti \ n sebelum melewati kode ke _.escape . Saya tidak tahu mengapa itu penting, ada dalam kode, tetapi ia bekerja dengan baik dengan interpolasi dan _.escape - yang tidak luput dari karakter white-space - juga.
Secara default parameter data dilewatkan oleh pernyataan with (data) {...} , tetapi jenis evaluasi ini jauh lebih lambat daripada evaluasi dengan variabel bernama. Jadi penamaan data dengan parameter variabel adalah sesuatu yang baik ...
Sebagai contoh:
hasil
Anda dapat menemukan lebih banyak contoh di sini tentang cara menggunakan templat dan mengabaikan pengaturan default: http://underscorejs.org/#template
Dengan memuat template Anda memiliki banyak pilihan, tetapi pada akhirnya Anda selalu harus mengubah template menjadi string. Anda dapat memberikannya sebagai string normal seperti contoh di atas, atau Anda dapat memuatnya dari tag skrip, dan menggunakan fungsi .html () dari jquery, atau Anda dapat memuatnya dari file terpisah dengan plugin tpl dari require.js .
Pilihan lain untuk membangun pohon dom dengan laconic bukan templating.
sumber
Saya memberikan contoh yang sangat sederhana
1)
Hasilnya adalah
2) Ini adalah templat
Ini html
Ini adalah kode javascript yang berisi objek json dan menempatkan template ke html
sumber
dengan express sangat mudah. semua yang Anda butuhkan adalah menggunakan modul konsolidasi pada node sehingga Anda perlu menginstalnya:
maka Anda harus mengubah mesin default ke template html dengan ini:
daftarkan mesin template garis bawah untuk ekstensi html:
selesai !
Sekarang untuk memuat misalnya template yang disebut 'index.html':
Saya harap ini membantu Anda!
sumber
Saya ingin berbagi satu temuan penting lagi.
penggunaan <% = variabel => akan menghasilkan kerentanan skrip lintas situs. Jadi lebih aman menggunakan <% - variabel -> sebagai gantinya.
Kami harus mengganti <% = dengan <% - untuk mencegah serangan skrip lintas situs. Tidak yakin, apakah ini akan berdampak pada kinerja
sumber
Lodash juga sama Pertama menulis skrip sebagai berikut:
Sekarang tulis beberapa JS sederhana sebagai berikut:
Di mana popoup adalah div di mana Anda ingin menghasilkan tabel
sumber