2012-12-27 9 views
54

Szablony jQuery zostały wycofane już od jakiegoś czasu.Polecane szablony jQuery na rok 2012?

Mam pewne dane w postaci obiektu JavaScript, który chcę sformatować jako HTML i dołączyć do DOM. Jaki jest najlepszy sposób robienia tego w dzisiejszych czasach?

  1. Czy powinienem utworzyć ciąg znaków HTML?
  2. Czy mogę tworzyć elementy za pomocą jQuery, takie jak $('<li>',{id:'my-'+Id}).append($('<span>').text(myText))?
  3. Czy istnieje zastępczy lub dojrzały substytut szablonów jQuery?
+4

[Docs API] (http://api.jquery.com/jquery.tmpl/) są najwyraźniej jeszcze bardziej przestarzałe, mówią, że funkcja jest "w fazie beta". – bfavaretto

+0

@bfavaretto: Tak. Mówi [tutaj] (https://github.com/jquery/jquery-tmpl), że nie przechodzą do przeszłości beta. – mpen

+2

Niektóre testy wydajności [wyniki] (http://jsperf.com/2dom-manipulation-js-templating-vs-programatic-jquery) dla trzech opcji. – sfk

Odpowiedz

10

powinno się próbować Handlebars i/lub Mustache

I mają tendencję do używania Kierownica ale składnia jest bardzo podobna.

104

To jak to zrobić w moich projektach:

zdefiniować szablon w HTML:

<script type="text/template" id="cardTemplate"> 
<div> 
    <a href="{0}">{1}</a> 
</div> 
</script> 

Używaj String.Format zastąpić zmienne:

var cardTemplate = $("#cardTemplate").html(); 
var template = cardTemplate.format("http://example.com", "Link Title"); 
$("#container").append(template); 

string.format:

String.prototype.format = function() { 
    var args = arguments; 
    return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined' 
     ? args[number] 
     : match 
    ; 
    }); 
}; 

Całkiem proste, można nawet łączyć szablony.

+6

W jaki sposób uniknąć kodu HTML w razie potrzeby? W twoim przykładzie, jeśli '{0}' zawierał podwójny cytat, po prostu wysadziłeś swój HTML. – mpen

+3

@ Mark Możesz nazwać 'escape()'.Zdecydowanie poszukałbym czegoś solidniejszego, gdybym potrzebował więcej niż kilku małych szablonów. Po prostu umieściłem to tutaj jako przykład czegoś, co może być przydatne, tak jak było dla mnie. – sachleen

+0

niesamowite .. jedna wątpliwość .. dlaczego musi być umieszczona pod

7

Szablony do końca, znacznie łatwiejsze niż próba ręcznego przeanalizowania JSON. Ponieważ przyczyniłem się do tego, jestem stronniczy dla json2html, ponieważ nie wymaga to kompilowania szablonów ORAZ używa tylko JSON i JavaScript.

http://json2html.com

+0

Spośród innych wymienionych tutaj podoba mi się to najlepiej. Dzięki! – bdwakefield