Motori di templating jQuery [chiuso]

Sto cercando un motore modello per utilizzare il lato client. Ho provato alcuni come jsRepeater e jQuery Templates. Mentre sembrano funzionare bene in FireFox, sembrano tutti fallire in IE7 quando si tratta di renderizzare le tabelle HTML.

Ho anche dato un'occhiata a MicrosoftAjaxTemplates.js (da http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ) ma risulta che ha lo stesso problema.

Qualche consiglio su altri motori di template da usare?

Dai un'occhiata a Post Templating di Rick Strahl con jQuery . Esplora jTemplates, ma poi fa un caso migliore per la soluzione di micro-templating di John Resig , anche migliorandola. Buoni confronti, molti campioni.

Ho appena fatto qualche ricerca su questo e userò jquery-tmpl . Perché?

1. È scritto da John Resig.
2. Sarà gestito dal core team jQuery come plugin "ufficiale". EDIT: il team di jQuery ha deprecato questo plugin.
3. Trova un perfetto equilibrio tra semplicità e funzionalità.
4. Ha una sintassi molto pulita e ben ponderata.
5. HTML codifica per impostazione predefinita.
6. È altamente estensibile.

Maggiori informazioni qui: http://forum.jquery.com/topic/templating-syntax

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

Qualcuno ha preso la soluzione di micro-template di Resig e l'ha impacchettata in un plugin jQuery.

Lo userò fino a quando Resig non rilascerà il suo (se rilascia il suo).

Grazie per la punta, ewbi.

jQuery Nano :

Motore modello

Utilizzo di base

Supponendo di avere la seguente risposta JSON:

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

tu puoi fare:

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

e ti prepari la stringa:

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

Pagina di prova ...

jQuery-tmpl sarà nel core jQuery a partire da jQuery 1.5:

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

La documentazione ufficiale è qui:

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

EDIT: è stato lasciato fuori da jQuery 1.5 e ora sarà coordinato dal team dell'interfaccia utente di jQuery, in quanto dipenderà dalla prossima griglia dell'interfaccia utente di jQuery.

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

Non sono sicuro di come gestisca il tuo problema specifico, ma c'è anche il motore di template PURE .

Dipende da come definisci "migliore", vedi il mio post qui sull'argomento

Se cerchi il più veloce , ecco un bel punto di riferimento , sembra che DoT vinca e lasci tutti gli altri indietro

Se stai cercando il plugin JQuery più ufficiale , ecco quello che ho scoperto

Parte I: Modelli JQuery

Il beta, plugin di template JQuery temporaneamente ufficiale era questo http://api.jquery.com/category/plugins/templates/

Ma a quanto pare, non molto tempo fa è stato deciso di tenerlo in Beta ...

Nota: il team di jQuery ha deciso di non portare questo plugin oltre la beta. Non viene più sviluppato o mantenuto attivamente. I documenti rimangono qui per il momento (per riferimento) fino a quando non è pronto un plug-in di modello di sostituzione adatto.

Parte II: il prossimo passo

La nuova tabella di marcia sembra mirare a un nuovo set di plug-in, JSRender (indipendente da DOM e persino il motore di rendering dei template di JQuery) e JSViews che hanno alcuni buoni collegamenti di dati e l'implementazione di osservatori / modelli osservabili

Ecco il post sul blog sull'argomento

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

Ed ecco l'ultima fonte

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

Altre risorse

• Una bella presentazione sull'argomento http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Demo di lavoro: http://borismoore.github.com/jsviews/demos/index.html

Nota che non è ancora nemmeno in versione beta e solo un elemento della road map, ma sembra un buon candidato per diventare un'estensione JQuery / JQueryUI ufficiale per modelli e associazione UI

Solo per essere lo sciocco ^^

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

Questo non è specifico di jsquery, ma ecco una libreria di template basata su JS rilasciata da google come open source:

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

Ciò consente di utilizzare elementi DOM come modelli ed è rientrante (in quanto l'output del rendering di un modello è ancora un modello che può essere ridistribuito con un modello di dati diverso).

Altri hanno indicato jquery-tmpl e ho votato a favore di questa risposta. Ma assicurati di dare un'occhiata alle forcelle Github.

Ci sono correzioni importanti là fuori e anche funzionalità interessanti. http://github.com/jquery/jquery-tmpl/network

John Resig ne ha pubblicato uno sul suo blog. http://ejohn.org/blog/javascript-micro-templating/

Se lavori in .NET Framework 2.0 / 3.5, dovresti dare un'occhiata a JBST come implementato da http://JsonFx.net . Ha una soluzione di template lato client che ha una sintassi JSP / ASP familiare ma è precompilata in fase di compilazione per i modelli compatti abilitati alla cache che non devono essere analizzati in fase di esecuzione. Funziona bene con jQuery e altre librerie JavaScript poiché i modelli stessi sono compilati in puro JavaScript.

Stavo usando jtemplates jquery pluging ma le prestazioni erano davvero pessime. Sono passato a trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) che offre prestazioni molto migliori. Non ho notato alcun problema con IE7 o FF.

Per lavori molto leggeri jquery-tmpl è adeguato, ma richiede in alcuni casi che i dati sappiano come formattare se stessi (cosa negativa!).

Se stai cercando un plugin per template più completo, ti suggerisco Orange-J . È stato ispirato da Freemarker. Supporta se, altrimenti, passa sopra oggetti e matrici, javascript incorporato, inclusi i modelli all'interno dei modelli e ha eccellenti opzioni di formattazione per l'output (maxlen, wordboundary, htmlentities, ecc.).

Oh, e sintassi semplice.

Potresti pensare un po 'a come vuoi progettare i tuoi modelli.

Un problema con molte delle soluzioni di template elencate (jQote, jquery-tmpl, jTemplates) è che richiedono l'inserimento di non HTML nel tuo HTML, il che può essere una seccatura per lavorare con strumenti HTML o in un processo di sviluppo con designer HTML . Personalmente non mi piace la sensazione di questo approccio, anche se ha i suoi pro e contro.

Esiste un'altra classe di approcci modello che utilizzano HTML normale, ma consentono di indicare associazioni di dati con attributi di elementi, classi CSS o mapping esterni.

Tramortire è un buon esempio di questo approccio, ma non l'ho usato da solo, quindi lo lascio ai voti per decidere se piace o no agli altri. Almeno fino a quando non avrò il tempo di giocarci di più.

PURE elencato come un'altra risposta è un altro esempio di questo approccio.

Per riferimento puoi anche guardare chain.js , ma non sembra essere stato aggiornato molto dalla sua versione originale. Per ulteriori informazioni, consultare http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Dropbox utilizzando il motore di template di John Resig sul sito Web. Lo hanno leggermente modificato, puoi controllare in questo file js di dropbox. Cerca in questo file per tmpl e codificherai il motore del modello.

Grazie. Spero che sia utile per qualcuno.

Attualmente sto usando un framework di template multi HTML. Questo framework semplifica notevolmente l'importazione dei dati basati su modelli nel DOM. Ottima anche la modellazione MVC.

http://www.enfusion-framework.org/ (guarda gli esempi!)

C'è anche una riscrittura di PURE di beebole - jquery pure html template - https://github.com/mpapis/jquery-pure-templates

Dovrebbe consentire un rendering molto più automatico principalmente usando i selettori jquery, cosa più importante che non richiede di mettere cose fantasiose in HTML.