mesin templating jQuery [ditutup]

Saya mencari mesin templat untuk menggunakan sisi klien. Saya telah mencoba beberapa seperti jsRepeater dan jQuery Templates. Meskipun mereka tampaknya berfungsi dengan baik di FireFox, mereka semua tampaknya rusak di IE7 ketika datang ke rendering tabel HTML.

Saya juga melihat MicrosoftAjaxTemplates.js (dari http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ) tetapi ternyata memiliki masalah yang sama.

Adakah saran untuk menggunakan mesin templating lain?

Lihat posting Rick Strahl Client Templating dengan jQuery . Dia mengeksplorasi jTemplates, tetapi kemudian membuat kasus yang lebih baik untuk solusi micro-templating John Resig , bahkan memperbaikinya. Perbandingan yang bagus, banyak sampel.

Baru saja melakukan riset tentang ini dan saya akan menggunakan jquery-tmpl . Mengapa?

1. Ini ditulis oleh John Resig.
2. Ini akan dikelola oleh tim inti jQuery sebagai plugin "resmi". EDIT: Tim jQuery telah mencabut plugin ini.
3. Ia menemukan keseimbangan sempurna antara kesederhanaan dan fungsionalitas.
4. Ini memiliki sintaks yang sangat bersih dan dipikirkan dengan baik.
5. Ini HTML-encode secara default.
6. Sangat bisa diperluas.

Lebih lanjut di sini: http://forum.jquery.com/topic/templating-syntax

jQote: http://aefxx.com/jquery-plugins/jqote/

Seseorang mengambil solusi templating mikro Resig dan mengemasnya menjadi plugin jQuery.

Saya akan menggunakan ini sampai Resig merilis sendiri (jika dia merilis sendiri).

Terima kasih atas tipnya, ewbi.

jQuery Nano :

Mesin Templat

Penggunaan Dasar

Dengan asumsi Anda telah mengikuti respons JSON:

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

Anda dapat membuat:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

dan Anda mendapatkan string siap:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Halaman pengujian ...

jQuery-tmpl akan berada di inti jQuery yang dimulai pada jQuery 1.5:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

Dokumentasi resmi ada di sini:

http://api.jquery.com/category/plugins/templates/

EDIT: Sudah ditinggalkan dari jQuery 1.5 dan sekarang akan dikoordinasikan oleh tim UI jQuery, karena itu akan menjadi ketergantungan dari jQuery UI Grid yang akan datang.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Tidak yakin bagaimana menangani masalah spesifik Anda, tetapi ada juga mesin template PURE .

Itu tergantung pada bagaimana Anda mendefinisikan "terbaik", silakan lihat posting saya di sini pada topik

Jika Anda mencari yang tercepat , ini adalah patokan yang bagus , sepertinya DoT menang, dan membuat semua orang tertinggal

Jika Anda mencari plugin JQuery paling resmi , inilah yang saya temukan

Bagian I: JQuery Templates

Pengaya templat JQuery beta yang sementara waktu resmi adalah http://api.jquery.com/category/plugins/templates/ ini

Namun ternyata, belum lama berselang diputuskan untuk menyimpannya dalam Beta ...

Catatan: Tim jQuery telah memutuskan untuk tidak menggunakan plugin ini melewati beta. Tidak lagi dikembangkan atau dipelihara secara aktif. Dokumen tetap di sini untuk sementara waktu (untuk referensi) sampai plugin templat pengganti yang sesuai siap.

Bagian II: Langkah selanjutnya

The roadmap baru tampaknya bertujuan untuk satu set baru plugin, JSRender (independen dari DOM dan bahkan JQuery mesin rendering template) dan JSViews yang memiliki beberapa data yang bagus mengikat dan pengamat / implementasi pola diamati

Berikut adalah posting blog tentang topik tersebut

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

Dan di sini adalah sumber terbaru

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Sumber daya lainnya

• Presentasi yang bagus tentang topik http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Demo yang berfungsi: http://borismoore.github.com/jsviews/demos/index.html

Perhatikan bahwa ini masih belum dalam versi beta, dan hanya item peta jalan, tetapi sepertinya kandidat yang baik untuk menjadi ekstensi JQuery / JQueryUI resmi untuk templat dan pengikatan UI

Hanya untuk menjadi orang bodoh ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

Ini bukan spesifik jsquery, tapi di sini templating library berbasis JS yang dirilis oleh google sebagai open source:

http://code.google.com/p/google-jstemplate/

Ini memungkinkan menggunakan elemen DOM sebagai templat, dan masuk kembali (karena output rendering templat masih berupa templat yang dapat dirender ulang dengan model data yang berbeda).

Yang lain menunjuk jquery-tmpl, dan saya telah meningkatkan jawaban itu. Tapi pastikan untuk melihat garpu github.

Ada perbaikan penting di luar sana dan fitur menarik juga. http://github.com/jquery/jquery-tmpl/network

John Resig memiliki satu yang dia diposting di blog-nya. http://ejohn.org/blog/javascript-micro-templating/

Jika Anda bekerja di .NET Framework 2.0 / 3.5, Anda harus melihat JBST seperti yang diterapkan oleh http://JsonFx.net . Ini memiliki solusi templating sisi-klien yang memiliki sintaksis JSP / ASP yang sudah dikenal tetapi dikompilasi pada waktu build-up untuk templat-templat cache yang kompak yang tidak perlu diuraikan pada saat runtime. Ini berfungsi baik dengan jQuery dan perpustakaan JavaScript lainnya karena templatnya sendiri dikompilasi menjadi JavaScript murni.

Saya menggunakan pluging jquery jtemplates tapi kinerjanya sangat buruk. Saya beralih ke trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) yang memiliki kinerja jauh lebih baik. Saya belum melihat adanya masalah dengan IE7 atau FF.

Untuk pekerjaan yang sangat ringan, jquery-tmpl sudah memadai, tetapi dalam beberapa kasus diperlukan data yang tahu cara memformat dirinya sendiri (hal buruk!).

Jika Anda mencari plugin templating berfitur lengkap, saya sarankan Orange-J . Itu terinspirasi oleh Freemarker. Ini mendukung jika, selain itu, loop atas objek & array, javascript inline, termasuk template di dalam template dan memiliki opsi format yang sangat baik untuk output (maxlen, wordboundary, htmlentities, dll).

Oh, dan sintaks mudah.

Anda mungkin ingin berpikir sedikit bagaimana Anda ingin mendesain template Anda.

Salah satu masalah dengan banyak solusi template yang terdaftar (jQote, jquery-tmpl, jTemplates) adalah mereka meminta Anda untuk memasukkan non-HTML ke dalam HTML Anda, yang dapat menyulitkan untuk bekerja dengan dalam perangkat HTML atau dalam proses pengembangan dengan desainer HTML . Saya pribadi tidak suka nuansa pendekatan itu, meskipun memiliki pro dan kontra.

Ada kelas pendekatan templat lain yang menggunakan HTML normal, tetapi memungkinkan Anda menunjukkan ikatan data dengan atribut elemen, kelas CSS, atau pemetaan eksternal.

Knockout adalah contoh yang baik dari pendekatan ini, tetapi saya belum menggunakannya sendiri, jadi saya serahkan pada suara untuk memutuskan apakah orang lain suka atau tidak. Setidaknya sampai saya punya waktu untuk bermain lebih banyak.

PURE terdaftar sebagai jawaban lain adalah contoh lain dari pendekatan ini.

Untuk referensi, Anda juga dapat melihat chain.js , tetapi sepertinya tidak banyak diperbarui sejak rilis aslinya. Untuk latar belakang lebih lanjut, lihat http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Dropbox menggunakan mesin templat John Resig di situs web. Mereka telah sedikit memodifikasinya Anda dapat memeriksa di file js ini dari dropbox. Cari di file ini untuk tmpl dan Anda akan kode mesin template.

Terima kasih. Semoga bermanfaat bagi seseorang.

Saat ini saya menggunakan kerangka templating multi-HTML. Kerangka kerja ini membuatnya lebih mudah untuk mengimpor data templated di DOM Anda. Juga pemodelan MVC yang hebat.

http://www.enfusion-framework.org/ (lihat sampel!)

Ada juga penulisan ulang PURE oleh beebole - jquery pure html templates - https://github.com/mpapis/jquery-pure-templates

Seharusnya memungkinkan lebih banyak render otomatis sebagian besar menggunakan pemilih jquery, yang lebih penting tidak perlu memasukkan hal-hal mewah ke dalam HTML.