JQuery için önerilen JavaScript HTML şablon kitaplığı? [kapalı]


89

Hangi HTML şablon kitaplığının JQuery ile uyumlu olacağına dair herhangi bir öneriniz var mı? Google'da çok sayıda kitaplık ortaya çıkıyor, ancak zamanın testine dayanacak iyi tanınan bir kitaplık olup olmadığından emin değilim.


21
100 kaydı olan bir json nesnesini geri getirdiğinizi varsayalım. Her kaydın aynı html parçasını oluşturması gerekir. Js'de biçimlendirmeyi oluşturmaktan çok bir şablon kullanmak yardımcı olur. Bir tasarımcının js işlevindeki bir dizenin içinde olması yerine onu tasarlamasına izin verir
redsquare

3
@cletus - çünkü html formatlı bir şablon kullanmak bir eklenti zincirinden daha kolaydır
Andrey

2
Seçiminize yardımcı olması için bu mükemmel karşılaştırmayı kullanın: jsperf.com/dom-vs-innerhtml-based-templating
AM

Yanıtlar:


58

Dürüst olmak gerekirse, müşteri tarafı şablonlama bugünlerde çok sıcak, ancak oldukça orman.

bence en popüler olanlar:

  • pure : Kendi "sözdizimini" değil, yalnızca js kullanır
  • bıyık : oldukça sağlam ve güzel duydum.
  • jqote2 : jsperfs'e göre son derece hızlı
  • jquery şablonları (kullanımdan kaldırıldı):

daha pek çok şey var, ancak size ve proje tarzınıza en uygun olanı görmek için onları test etmeniz gerekiyor.

Şahsen, yeni bir sözdizimi ve mantık seti eklemekte zorlanıyorum ( mantık ve şablon karıştırma, merhaba ?? ) ve saf js'ye geçtim. Şablonlarımdan her biri kendi html dosyasında (./usersTable.row.html) saklanıyor. Şablonları yalnızca içeriği ajaxlarken kullanıyorum ve birkaç "logic" js dosyam var, biri tablolar için, biri div için, biri listeler için. ve seçim seçenekleri için bir tane bile değil (başka bir yöntemi kullandığım yerde).

Ne zaman daha karmaşık bir şey yapmaya çalışsam, kodun daha az net olduğunu ve stabilize etmem için onu "eski" yöntemden daha fazla zaman aldığımı öğrendim. Şablondaki mantık bence tamamen anlamsız ve kendi sözdizimini eklemek yalnızca izlemesi çok zor hataları ekler.


14

jTemplates

JavaScript için bir şablon motoru.

JQuery eklentisi ...

Özellikleri:

  • JavaScript'te% 100
  • ön derleyici
  • JSON desteği
  • Ajax ile çalışın
  • Şablon içinde JavaScript kodunu kullanmaya izin ver
  • Basamaklı şablonlar oluşturmaya izin ver
  • Şablonlarda parametreleri tanımlamaya izin ver
  • Canlı Yenileme! - sunucudan otomatik güncelleme içeriği ...

8

Bu konuyla ilgili makul bir tartışma belge yoktur burada templating araçları da kapsar. Yine de jQuery'ye özgü değil.


5

jQuery Şablon Eklentisi Microsoft tarafından oluşturulmuş ve resmi bir jQuery eklentisi olarak kabul edilmiştir.

Ancak artık kullanımdan kaldırıldığını unutmayın .


13
ve o zamandan beri "kullanımdan kaldırıldı". Geliştirme durdurulur ve bu betadan çıkmaz. bir ms elemanı ve jquery-ui ekibi, JSRender thou tabanlı yeni bir şablon üzerinde çalışıyor;)
roselan

Hah, serseri - Web uygulamamın her yerinde kullanıyorum :( Yine de ipucu için teşekkürler! Bahsettiğiniz yaklaşan şablon motoruyla ilgili bir bağlantınız var mı?
Andrey

1
Eğer her şey iyi giderse, boris moore tarafından jsrender , jquery- ui'ye yolu bulacaktır. Aceleye gerek yok sanırım;)
roselan

1
Bir projede jsRender uyguladım ve bu gerçekten harika. Kontrol etmeye değer.
ASeale

4

Ben kontrol ederim json2html o yazma HTML parçacıkları zorunda ve JSON nesnesi dizisi en yapılandırılmamış listelerine dönüştürmek yerine JSON dönüşümler dayanır forgoes. Çok hızlıdır ve DOM oluşturmayı kullanır.


4
feragat .. Bunu ben yazdım. Ama kontrol etmeye değer;)
Chad Brown

3

Birkaç yıl önce IBDOM'u kurdum: http://ibdom.sf.net/ | Aralık 2009 itibariyle, doğrudan bagajdan alırsanız jQuery bağlamayı destekler.

$("#foo").injectWith(collectionOfJavaScriptObjects);

veya

$("#foo").injectWith(simpleJavaScriptObject);

Ayrıca, artık tüm "data: propName" işaretleyicilerini class = "data: propName diğer sınıf adları" özniteliklerine koyabilirsiniz, böylece uygulamanızın içeriğini bu işaretçilerle doldurmak zorunda kalmazsınız.

Son geliştirmelerimi yansıtmak için oradaki bir dizi dokümantasyonu henüz güncellemedim, ancak 2007'den beri bu çerçevenin çeşitli sürümlerini üretimde kullandım.

Bu soruya şüpheyle yaklaşanlara:

Microsoft, şimdi XmlHttpRequest olarak bildiğimiz şeyi ve "ajax" kalıbını IE5 ile icat ettiğinde, bunun arkasındaki vaadin bir kısmı, bir web tarayıcısı ile sunucu arasında tamamen veri alışverişi yapmaktı. Bu veriler XML'de saklanacaktı, çünkü 1999 / 2000'de XML çok sıcaktı. Geri arama mekanizmasıyla ağ üzerinden bir xml belgesini almanın ötesinde, MSXML ActiveX bileşeni, şu anda XSL-T ve XPath olarak bildiğimiz şeyin bir ön taslak uygulamasını da destekledi.

HTTP / XML, XPath ve XSL-T'nin alınmasını birleştirmek, geliştiricilere "uygulama" olarak davranan, yalnızca gönderen ve daha da önemlisi sunucudan veri alan zengin "belgeler" oluşturmak için muazzam bir yaratıcılık sağladı.

Bu neden kullanışlı bir model? Kullanıcı arayüzünüzün ne kadar karmaşık olduğuna ve sürdürülebilirliğini ne kadar önemsediğinize bağlıdır.

Gelişmiş CSS ile görsel olarak çok zengin, semantik olarak işaretlenmiş bir arayüz oluştururken, yapmak isteyeceğiniz son şey, biçimlendirme parçalarını "mini denetleyici / görünümler" olarak parçalamaktır, böylece bir belge parçasını ana öğeye .innerHTML yapabilirsiniz. belge ve işte nedeni.

Gelişmiş bir html / css kullanıcı arayüzünü yönetilebilir tutmanın temel ilkelerinden biri, doğrulamasını en azından aktif geliştirme aşamasında korumaktır. İşaretlemeniz doğrulanırsa, CSS hatalarınıza odaklanabilirsiniz. Şimdi, kullanıcı etkileşiminin çeşitli aşamalarında işaretleme parçaları enjekte edilirse, bunların hepsi yönetilmesi çok güç hale gelir ve her şey kırılgan hale gelir.

Buradaki fikir, tüm işaretleme kullanıcı arayüzü yapılarınızın tek bir belgede olması, SADECE VERİLERİN alınmasıydı. ağ üzerinden alınması ve en azından verilerinizi biçimlendirme yapılarınıza ve en çok çoğaltılmış biçimlendirme yapılarına enjekte edecek sağlam bir çerçeve kullanmaktı. tekrarlanabilir olarak işaretlediğiniz.

Bu, IE5 + 'da XSL-T ve XPath ile mümkündü, ancak neredeyse hiçbir tarayıcıda mümkün değildi. Bazı F / OSS tarayıcı çerçeveleri XPath ile uğraşıyor, ancak bu henüz güvenebileceğimiz bir şey değil.

Öyleyse böyle bir kalıbı elde etmek için bir sonraki en iyi şey nedir? IBDOM. Sunucunuzdan veri alın, belgenize ekleyin. zahmetsizce.


bir şey daha var: IBDOM,% 100 saf DOM yöntemleri ve sıfır innerHTML kullanır.
Chris Holland

başka bir not: IBDOM, kendi başına kullanılabilen ve dahili olarak kullanılan bir bileşen olan "forkedLoopExecution" dediğim şeyi uygular. Sorun şuydu: DOM'u createElement ve appendChild aracılığıyla, oldukça büyük bir büyük veri nesnesi dizisinin üzerinden geçmesi gereken bir tür döngü yapısında değiştirdiğinizi varsayalım: çoğu tarayıcı, şu tarihe kadar kullanıcı arayüzünü "yeniden boyamayacak" DOM'u etkileyen kod "geri döner". Çok fazla veri içeren büyük bir "for döngüsü" içinde, arama sonuçlarımızın her şeyi tek bir yığın halinde görüntülemesi fark edilir şekilde yarım saniye ila birkaç saniye sürebilir.
Chris Holland

çözüm: çatallı döngü yürütme, her döngü yinelemesinde temelde "geri dön ve yeniden boyamak" için tekrar tekrar aktarılan veri toplamanın ömrü boyunca setTimeout kaynaklı özyinelemeli yürütmeden yararlanarak size şu anında oluşturma hissini verir: "kullanıcıya bakacak bir şey verin - şimdi sağdaki lanet olası ".
Chris Holland

2

Javascript-Şablonlarına bir göz atmalısınız, bu, ünlü jQuery Dosya Yükleme eklentisinde kullanılan ve aynı yazar Sebastian Tschan (@blueimp) tarafından geliştirilen küçük bir şablon motorudur.

https://github.com/blueimp/JavaScript-Templates

Sebastian tarafından hazırlanan kullanım kılavuzunu izleyin , sadece bu satırı kaldırın

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Bununla değiştir

$('#result').html(tmpl('tmpl-demo', data));

HTML dosyanıza div sonuç etiketini de eklemeyi unutmayın

<div id="result"></div>

Zevk almak

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.