mesin templating jQuery [ditutup]


204

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?


1
Saya ingin memperbarui pertanyaan ini dua kali :)
Mark Schultheiss

1
Saya akan memeriksa JSViews dan JSRender yang sangat bagus (tapi pra-beta), sepertinya mesin templating JQuery / UI resmi potensial (setidaknya inilah yang dikatakan roadmap)
Eran Medan

1
JsRender sekarang memiliki kandidat beta publik: borismoore.com/2012/03/...
John Papa

Saya menggunakan templat DoT sekarang, kinerja bagus, dan notasi seperti Kumis
Eran Medan

Jawaban:


109

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.


3
github.com/jquery/jquery-tmpl adalah repo sebenarnya dari templating plugin Resig.
Alexander Bird

@ Thr4wn, sumber di repro secara signifikan maka perpustakaan dibahas dalam artikel terkait. Keduanya oleh Resig, tentu saja.
Frank Schwieterman

@ Terus "sumber di repro secara signifikan maka perpustakaan dibahas dalam artikel yang ditautkan" Um huh? Katakan apa? Tidak yakin apa yang Anda maksudkan dengan ini sama sekali.
Mark Schultheiss

2
@ Mark: maksudnya "berbeda jauh dari."
Domenic

Saya belum melihat contoh bentuk kompleks yang dibangun dengan ini. Adakah yang mengeksplorasi apa yang diperlukan untuk menambahkan baris, beberapa bagian dari keseluruhan template, untuk mengakomodasi elemen baru dalam bentuk yang terikat array objek? Template akan mencakup templating indeks elemen dari array dan dapat diserialisasi dengan benar untuk POSTing. Tapi aku kesulitan memikirkan semuanya. Tujuannya adalah fungsionalitas seperti InfoPath. (Saya mengetahui berbagai fitur infopath yang ada dan alternatif infopath.)
Jason Kleban

47

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


+1. Tapi saya menggunakan Rick Strahl's. Bcoz itu kecil dan melayani tujuan saya dengan baik.
Ismail

baru saja diumumkan bahwa ini sekarang adalah plugin resmi
serg

20
Sayangnya, itu terdepresiasi . ada forker?
OnesimusUnbound

3
Sudahkah skenario berubah sekarang pada tahun 2012, maksud saya, apakah ada solusi yang lebih baik untuk templating dengan menggunakan perpustakaan yang dikembangkan di atas skrip asli resig?
Rajat Gupta

4
@OnesimusUnbound Sudah super unggulan oleh JS Render. github.com/BorisMoore/jsrender
Blowsie


17

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 ...


Ini tidak melakukan struktur kontrol (jika dan loop)
mahemoff

13

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/


11

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


selain keterbatasannya, PURE sangat mudah digunakan
Jader Dias

@ Jader, batasan apa yang paling menyakitkan?
Mic

@Mic MURNI dibatasi oleh desain. Di mesin templat sisi server Anda tidak harus tetap menggunakan HTML yang valid, tetapi PURE didasarkan pada HTML. Tapi saya pikir ada kebiasaan yang memungkinkan mesin template javascript lain menjadi sekuat sisi server.
Jader Dias

@ Jader, ok untuk HTML saja. Tapi saya tidak mengerti apa yang Anda maksudkan dengan quirks dan mesin lain.
Mic

@Mic MURNI harus ditulis ulang dari awal untuk memungkinkan beberapa fitur disertakan. Untuk mengizinkan templat HTML yang tidak valid, Anda harus menggunakan scripttag dengan atribut typeberbeda dari text/javascript. Ini adalah satu "kekhasan" yang memungkinkan HTML tidak valid.
Jader Dias

7

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

Sumber daya lainnya

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


4

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/ ;)


3

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).


2

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


1
Adakah garpu khusus untuk mencari perbaikan?
Kevin Hakanson

TBH, ini agak berantakan ... Aku pergi untuk github.com/appendto/jquery-tmpl setelah pemindaian cepat pada perubahan dan mempertimbangkan fakta bahwa appendto adalah sebuah perusahaan. YMMV
Yann

jquery-tmpl telah dilipat dalam distribusi resmi 1.4.3.
Yann


1

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.



1

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.


0

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/ .


0

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.


0

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!)


-1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.