jQuery şablonlama motorları [kapalı]

İstemci tarafını kullanmak için bir şablon motoru arıyorum. Ben jsRepeater ve jQuery Şablonları gibi birkaç deniyorum. FireFox'ta Tamam çalışıyor gibi görünse de, HTML tabloları oluşturma söz konusu olduğunda hepsi IE7'de parçalanıyor gibi görünüyor.

Ayrıca MicrosoftAjaxTemplates.js'ye de baktım ( http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 adresinden ), ancak aynı sorunu olduğu ortaya çıktı.

Kullanılacak diğer şablon motorlar hakkında tavsiyeleriniz var mı?

Rick Strahl adlı kullanıcının jQuery ile İstemci Templating adlı yazısına göz atın . JTemplates'i araştırıyor, ancak daha sonra John Resig'in mikro- geçici çözümü için daha iyi bir durum ortaya koyuyor , hatta biraz geliştiriyor. İyi karşılaştırmalar, çok sayıda örnek.

Bu konuda biraz araştırma yaptım ve jquery-tmpl kullanacağım . Neden?

1. John Resig tarafından yazılmıştır.
2. Temel jQuery ekibi tarafından "resmi" bir eklenti olarak korunacaktır. EDIT: jQuery ekibi bu eklentiyi kullanımdan kaldırmıştır.
3. Sadelik ve işlevsellik arasında mükemmel bir denge kurar.
4. Çok temiz ve iyi düşünülmüş bir sözdizimi vardır.
5. Varsayılan olarak HTML kodlar.
6. Oldukça genişletilebilir.

Daha fazla bilgi için: http://forum.jquery.com/topic/templating-syntax

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

Birisi Resig'in mikro-geçici çözümünü aldı ve bir jQuery eklentisine paketledi.

Resig kendi kendine serbest bırakana kadar bunu kullanacağım (eğer kendi serbest bırakırsa).

Bahşiş için teşekkürler, ewbi.

jQuery Nano :

Şablon Motoru

Temel Kullanım

Aşağıdaki JSON yanıtınız olduğunu varsayarsak:

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

yapabilirsin:

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

ve hazır dize alırsınız:

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

Test sayfası ...

jQuery-tmpl, jQuery 1.5'ten başlayarak jQuery çekirdeğinde olacaktır:

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

Resmi belgeler burada:

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

EDIT: jQuery 1.5 dışında bırakıldı ve şimdi jQuery UI ekibi tarafından koordine edilecektir, çünkü yaklaşan jQuery UI Grid'in bağımlılığı olacaktır.

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

Sorununuzu nasıl ele aldığından emin değilsiniz, ancak PURE şablon motoru da var.

Bu, "en iyi" yi nasıl tanımladığınıza bağlıdır, lütfen konuyla ilgili yazımı buraya bakın

Eğer için bakacak olursak en hızlı , burada güzel kriter , bu gibi görünüyor DoT kazanç ve yapraklar herkes arkasında

En resmi JQuery eklentisini arıyorsanız , işte bulduğum şey

Bölüm I: JQuery Şablonları

Beta, geçici olarak resmi JQuery şablon eklentisi bu http://api.jquery.com/category/plugins/templates/

Ama görünüşe göre, çok uzun zaman önce Beta'da tutmaya karar verildi ...

Not: jQuery ekibi bu eklentiyi beta sürümünü geçmemeye karar verdi. Artık aktif olarak geliştirilmemekte veya sürdürülmemektedir. Dokümanlar, uygun bir yedek şablon eklentisi hazır olana kadar (referans olarak) burada kalır.

Bölüm II: Bir sonraki adım

Yeni yol haritası eklentileri yeni bir dizi için nişan gibi görünüyor, JSRender (DOM bağımsız ve hatta JQuery şablon render motoru) ve JSViews bağlayıcı ve gözlemci / gözlemlenebilir desen uygulaması bazı güzel veri var

İşte konuyla ilgili blog yazısı

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

Ve işte en son kaynak

• JSGörüntüler https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Diğer kaynaklar

• Konuyla ilgili güzel bir sunum http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Çalışma demoları: http://borismoore.github.com/jsviews/demos/index.html

Hala beta sürümünde ve yalnızca bir yol haritası öğesinde bile olmadığını, ancak şablonlar ve UI bağlama için resmi bir JQuery / JQueryUI uzantısı olmak için iyi bir aday gibi göründüğünü unutmayın

Sadece aptal olmak ^ ^

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

Bu jsquery'ye özgü değildir, ancak google tarafından açık kaynak olarak yayınlanan JS tabanlı bir şablonlama kütüphanesi:

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

Bu, DOM öğelerinin şablon olarak kullanılmasına izin verir ve yeniden girilir (bir şablon oluşturmanın çıktısı hala farklı bir veri modeliyle yeniden oluşturulabilen bir şablondur).

Diğerleri jquery-tmpl'yi işaret etti ve ben bu cevabı iptal ettim. Ancak github çatallarına bir göz attığınızdan emin olun.

Orada önemli düzeltmeler ve ilginç özellikler de var. http://github.com/jquery/jquery-tmpl/network

John Resig'in blogunda yayınladığı bir tane var. http://ejohn.org/blog/javascript-micro-templating/

.NET Framework 2.0 / 3.5'te çalışıyorsanız, http://JsonFx.net tarafından uygulanan JBST'ye bakmanız gerekir . Bilinen JSP / ASP sözdizimine sahip olan ancak çalışma zamanında ayrıştırılması gerekmeyen kompakt önbellek kullanabilen şablonlar için derleme sırasında önceden derlenmiş bir istemci tarafı şablonlama çözümüne sahiptir. Şablonların saf JavaScript'e derlendiği için jQuery ve diğer JavaScript kitaplıklarıyla iyi çalışır.

Jtemplates jquery pluging kullanıyordum ama performans gerçekten kötüydü. Çok daha iyi bir performansa sahip trimpath'e ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) geçtim . IE7 veya FF ile ilgili herhangi bir sorun fark etmedim.

Çok hafif işler için jquery-tmpl yeterlidir, ancak bazı durumlarda verilerin nasıl biçimlendirileceğini bilmesi gerekir (kötü şey!).

Daha tam özellikli bir templating eklentisi arıyorsanız Orange-J'yi öneririm . Freemarker'den ilham aldı. Aksi takdirde, nesneler ve diziler üzerinde döngüler, şablonlar içindeki şablonlar da dahil olmak üzere satır içi javascript'i destekler ve çıktı için mükemmel biçimlendirme seçeneklerine (maxlen, wordboundary, htmlentities, vb.) Sahiptir.

Oh, ve kolay sözdizimi.

Şablonlarınızı nasıl tasarlamak istediğinizi biraz düşünmek isteyebilirsiniz.

Listelenen şablon çözümlerinin birçoğuyla (jQote, jquery-tmpl, jTemplates) bir sorun, HTML'nize HTML olmayan bir araç eklemenizi gerektirir; bu, HTML araçlarında çalışmak veya HTML tasarımcıları ile geliştirme sürecinde bir acı olabilir . Şahsen bu yaklaşımın hissini sevmiyorum, ancak artıları ve eksileri var.

Normal HTML kullanan ancak öğe nitelikleri, CSS sınıfları veya harici eşlemelerle veri bağlarını belirtmenize izin veren başka bir şablon yaklaşımı sınıfı vardır.

Nakavt bu yaklaşımın iyi bir örneğidir, ancak bunu kendim kullanmadım, bu yüzden başkalarının beğenip beğenmediğine karar vermek için oylara bırakıyorum. En azından onunla daha fazla oynayacak zamanım olana kadar.

Başka bir cevap olarak listelenen PURE bu yaklaşımın başka bir örneğidir.

Referans için chain.js'ye de bakabilirsiniz , ancak orijinal sürümünden bu yana çok güncellenmiş görünmüyor. Daha fazla bilgi için bkz. Http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Web sitesinde John Resig'in şablon motorunu kullanarak Dropbox . Biraz değiştirilmiş , dropbox'ın bu js dosyasında kontrol edebilirsiniz . Bu dosyada tmpl için arama yaparsanız şablon motorunun kodunu yazarsınız.

Teşekkürler. Umarım birisi için yararlı olur.

Şu anda çoklu HTML şablonlama çerçevesi kullanıyorum. Bu çerçeve, tempolu verilerin DOM'nize aktarılmasını çok daha kolay hale getirir. Ayrıca büyük MVC modelleme.

http://www.enfusion-framework.org/ (örneklere bakın!)

Beebole tarafından PURE'in yeniden yazılması da var - jquery pure html şablonları - https://github.com/mpapis/jquery-pure-templates

Çoğunlukla jquery seçicileri kullanarak çok daha fazla otomatik işleme izin vermelidir, daha önemli olan şey HTML'ye süslü şeyler koymak gerektirmez.