Adakah saran tentang pustaka template HTML mana yang cocok dengan JQuery? Googling menghasilkan cukup banyak perpustakaan tetapi saya tidak yakin apakah ada perpustakaan terkenal yang akan bertahan dalam ujian waktu.
javascript
jquery
templates
Siwa
sumber
sumber
Jawaban:
Sejujurnya, pembuatan template sisi klien sangat panas saat ini, tetapi cukup sulit.
yang paling populer adalah, saya yakin:
ada banyak lainnya, tetapi Anda harus mengujinya untuk melihat mana yang paling cocok untuk Anda, dan gaya proyek Anda, yang terbaik.
Secara pribadi, saya mengalami kesulitan dengan menambahkan sintaks baru dan serangkaian logika ( mencampur logika dan template, halo ?? ), dan menggunakan js murni. Setiap template saya disimpan dalam file html-nya sendiri (./usersTable.row.html). Saya menggunakan template hanya saat konten ajaxing, dan saya memiliki beberapa file js "logika", satu untuk tabel, satu untuk div, satu untuk daftar. dan bahkan tidak satu pun untuk opsi pilih (di mana saya menggunakan metode lain).
Setiap kali saya mencoba melakukan sesuatu yang lebih rumit, saya menemukan kodenya kurang jelas dan membutuhkan lebih banyak waktu untuk menstabilkan daripada melakukannya dengan cara "lama". Logika dalam template sama sekali tidak masuk akal menurut saya, dan menambahkan sintaksnya sendiri hanya menambahkan bug yang sangat sulit dilacak.
sumber
jTemplates
sumber
Ada dokumen diskusi yang masuk akal tentang topik ini di sini , yang mencakup berbagai alat pembuatan template. Tidak spesifik untuk jQuery.
sumber
Plugin Template jQuery dibuat oleh Microsoft dan diterima sebagai plugin jQuery resmi.
Namun perhatikan bahwa sekarang sudah usang.
sumber
Saya akan memeriksa json2html , itu lupa harus menulis cuplikan HTML dan sebaliknya bergantung pada transformasi JSON untuk mengubah array objek JSON menjadi daftar tidak terstruktur. Sangat cepat dan menggunakan pembuatan DOM.
sumber
Beberapa tahun yang lalu saya membangun IBDOM: http://ibdom.sf.net/ | Pada Desember 2009, ini mendukung jQuery binding jika Anda mendapatkannya langsung dari trunk.
$("#foo").injectWith(collectionOfJavaScriptObjects);atau
$("#foo").injectWith(simpleJavaScriptObject);Selain itu, Anda sekarang dapat meletakkan semua penanda "data: propName" di atribut class = "data: propName other classnames", jadi Anda tidak perlu mengotori konten aplikasi Anda dengan penanda tersebut.
Saya belum memperbarui banyak dokumentasi di sana untuk mencerminkan peningkatan saya baru-baru ini, tetapi saya telah memiliki berbagai versi kerangka kerja ini yang diproduksi sejak 2007.
Untuk skeptis terhadap pertanyaan ini:
Kembali ketika Microsoft menemukan IE5 yang sekarang kita kenal sebagai XmlHttpRequest dan pola "ajax", bagian dari janji di balik ini adalah untuk semata-mata bertukar data antara browser web dan server. Data itu harus dikemas dalam XML, karena pada 1999/2000, XML menjadi sangat panas. Selain mengambil dokumen xml melalui jaringan dengan mekanisme panggilan balik, komponen MSXML ActiveX MS juga mendukung implementasi pra-draf dari apa yang sekarang kita kenal sebagai XSL-T dan XPath.
Menggabungkan pengambilan HTTP / XML, XPath, dan XSL-T, memberikan kreativitas yang luar biasa kepada pengembang untuk membangun "dokumen" kaya yang berperilaku sebagai "aplikasi", hanya mengirim, dan yang lebih penting, mengambil data dari server.
Mengapa pola ini berguna? Itu tergantung pada seberapa kompleks antarmuka pengguna Anda, dan seberapa besar Anda peduli dengan pemeliharaannya.
Saat membangun antarmuka markup semantik yang sangat kaya secara visual dengan CSS tingkat lanjut, hal terakhir yang ingin Anda lakukan adalah membagi potongan markup menjadi "mini-controller / views", sehingga Anda dapat .innerHTML sebuah fragmen dokumen ke dalam utama dokumen, dan inilah alasannya.
Salah satu prinsip utama dalam menjaga antarmuka pengguna html / css lanjutan dapat dikelola, adalah mempertahankan validasinya setidaknya selama fase aktif pengembangannya. Jika markup Anda divalidasi, Anda dapat fokus pada bug CSS Anda. Sekarang, jika fragmen markup akhirnya disuntikkan selama berbagai tahap interaksi pengguna, semuanya menjadi sangat sulit untuk dikelola, dan semuanya menjadi rapuh.
Idenya adalah memiliki semua konstruksi UI markup Anda dalam satu dokumen, mengambil HANYA DATA melalui jaringan, dan menggunakan kerangka kerja yang solid yang setidaknya akan menyuntikkan data Anda ke dalam konstruksi markup Anda, dan paling banyak mereplikasi konstruksi markup yang Anda tandai sebagai berulang.
Ini dimungkinkan dengan XSL-T dan XPath di IE5 +, tetapi secara virtual tidak ada browser lain. Beberapa kerangka kerja browser F / OSS telah mencoba-coba XPath tetapi itu belum cukup untuk kami andalkan.
Jadi apa hal terbaik berikutnya untuk mencapai pola seperti itu? IBDOM. Dapatkan data dari server Anda, masukkan ke dalam dokumen Anda. dengan mudah.
sumber
Anda harus melihat Javascript-Templates, ini adalah mesin template kecil yang digunakan dalam plugin jQuery File Upload yang terkenal, dan dikembangkan oleh penulis yang sama, Sebastian Tschan (@blueimp)
https://github.com/blueimp/JavaScript-Templates
Ikuti panduan penggunaan yang dibuat oleh Sebastian, hapus saja baris ini
document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);Gantilah dengan yang ini
$('#result').html(tmpl('tmpl-demo', data));Jangan lupa untuk menambahkan tag hasil div di file HTML Anda juga
<div id="result"></div>Nikmati
sumber