Modelli HTML in Javascript? Senza codifica nella pagina?

Question

Sono un web man che fa principalmente roba lato server Perl, e sto lentamente arrivando ad alcune conclusioni.

• È molto meglio fare la maggior parte del codice tramite Javascript e gettare i dati avanti e indietro tramite la tecnologia AJAX di quanto non lo è quello di colpire inviare e ricaricare una pagina per lo più identico
• Mi piace jQuery perché mi piace CSS, ed è divertente concatenare definizioni lunghe e spaventose agli altri
• C'è qualcosa in questo genere di cose.

volete che il vostro elementi HTML a guardare come gli elementi HTML, ed è più facile da definire che in HTML:

<div class="sidebar_elem"> 
    <a href=""> TEXT</a> 
</div> 

di quanto lo sia a mettere lo stesso in Javascript o jQuery:

('<div/>') 
    .attr('id' , 'sidebar_elem' + i) 
    .addclass('sidebar_elem') 
    ; 
('<a/>') 
    .attr('href' , link_url) 
    .appendTo('#sidebar_elem' + i) 
    ; 

Questo è per dire che non sono più un agnostico di modelli, ma non so quale strumento di template in cui credere. Ho esaminato alcuni plugin di template basati su jQuery, ma devo ancora essere felice con qualsiasi di loro, in parte perché th e quelli che ho visto sembrano voler mettere tutto quel codice nella pagina stessa, che interrompe il "Solo markup va nei file HTML, solo lo stile va nei file CSS, solo il codice va nei file JS" mantra continuo a recitare.

Quindi, sto cercando uno strumento di template basato su Javascript che mi permetta di avere i miei modelli in un file esterno in modo che possa avere un cambio di modello coprire una serie di pagine web. Se è basato su jQuery, è fantastico, meno materiale che devo imparare, ma non è un rompicapo.

Answer 1

Che ne dici di EJS?

Esempio dalla loro pagina:

"EJS combina i dati e un modello per la produzione di HTML."

dati:

{title: 'Cleaning Supplies', supplies: ['mop', 'broom', 'duster'] } 

Template:

<ul> 
<% for(var i=0; i<supplies.length; i++) {%> 
    <li><%= supplies[i] %></li> 
<% } %> 
</ul> 

Risultato:

• mop
• scopa
• spolverino

Answer 2

Utilizzare un blocco script.

<script id="someId" type="text/html"> 
    <!-- your template here --> 
</script> 

e uno dei molti plugin JQuery.

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

Answer 3

Ci sono diversi buoni là fuori:

Mustache.js
Pure.js
Json Template

Se volete una versione jQuery, Tempest sembra buono.

Answer 4

Dovresti controllare il modello di chiusura di google. È completamente indipendente, quindi puoi usarlo con qualsiasi libreria tu voglia. È uno strumento per i modelli scritto in java.

http://code.google.com/closure/templates/docs/helloworld_js.html

Esso consente di creare un modello sul server, esegue una java "compilatore" su di esso e l'uscita è una funzione javascript che prende JSON come parametro.

{namespace examples} 
/** 
* Greets a person using "Hello" by default. 
* @param name The name of the person. 
* @param? greetingWord Optional greeting word to use instead of "Hello". 
*/ 
{template .helloName} 
    {if not $greetingWord} 
    Hello {$name}! 
    {else} 
    {$greetingWord} {$name}! 
    {/if} 
{/template} 

Questo genererà una funzione denominata esempi.helloName che può essere chiamato come

loro formato è molto IDE gentile, ho tutta la sintassi HTML evidenziazione quando si modificano i modelli

examples.helloName({name: 'Ana', greetingWord:"Howdy"}); 

È possibile chiamare altri modelli all'interno di modelli, automaticamente html Escapes i dati (a meno che tu non lo dica), fornisce supporto per la bidirezione.

Un'altra grande cosa è il fatto che lo strumento di template può anche generare codice java. Quindi qualcuno che scrive un'app che deve supportare i browser con script disabilitati può generare l'HTML sul server, se necessario.

Ultimo ma non meno importante, a differenza di altri js templating systems(), il modello viene analizzato sul server, quindi il lato client deve solo fare la fusione del modello e dei dati, l'analisi del modello viene eseguita come costruire un passo sul server.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate è un esempio di uno strumento di templating che viene eseguito completamente sul client. Esistono due problemi con questo approccio, l'analisi del modello viene eseguita sul client e l'html deve essere incorporato in una stringa javascript. Tuttavia, alcuni IDE (Intellij) evidenzieranno l'HTML all'interno delle stringhe JS).

Answer 5

E il codice JAML?

http://github.com/edspencer/jaml

Simile a un paio di quanto sopra, ma credo che è un po 'più logico ...

E' il concetto di definire i modelli tramite JSON/JavaScript e quindi utilizzando una funzione in JavaScript per passare argomenti al modello che viene reso e restituito come elemento.

Esistono implementazioni in giro per i vari framework JavaScript esistenti.

Answer 6

Ho a templating engine called stencil.js, che credo sia piuttosto dolce. Funziona con jQuery tramite jquery-haml DOM building engine.

Scrivi il tuo modello (che si può mettere in un file esterno e decodificare come JSON):

["%div.sidebar_elem" 
    ["%a", { href: { key:'link' } }, 
     { key: "text" } 
    ] 
] 

ed eseguirlo tramite stencil insieme con i vostri dati:

$("#parent").stencil(template, { link: "http://example.com", text: "Click me!" }); 

Non ci sono altri esempi al progetto GitHub stencil.js, ma penso che sia proprio quello che stai cercando.

Potrebbe utilizzare un paio di altri metodi di utilità e un codice per un componente di dati incompleto è ancora nel ramo master, quindi scrivimi un commento se sei interessato e vedrò se riesco a ripulirlo .

Answer 7

Le 2 librerie che conosco che non mescolano codifica modello con markup HTML sono chain.js e PURE

chain rende solo manipolazioni DOM.
PURE utilizza un mix di DOM e innerHTML poiché il DOM da solo può essere lento per il rendering di modelli più grandi.

Sono il principale contributore di PURE e l'abbiamo creato per creare un'app Web sul modello Ajax che descrivi.

Answer 8

Dai un'occhiata a questo http://ejohn.org/blog/javascript-micro-templating/. Realizzato da John Resig, creatore di jQuery, questo non ha nemmeno bisogno di jQuery, ed è davvero spaventoso. Memorizza anche i modelli nel tag script (la risposta di Daniel). Esempio di modello:

<script type="text/html" id="user_tmpl"> 
    <% for (var i = 0; i < users.length; i++) { %> 
     <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li> 
    <% } %> 
</script> 

forse si può caricare utilizzando attributo src se si ha realmente bisogno di loro di essere in file separati, che non credo sia una saggia idea, perché significa ulteriore andata e ritorno al server. Quindi, alla fine, per motivi di ottimizzazione, è possibile memorizzarli in file separati, ma incorporarli nella pagina che li richiede.

Answer 9

check-out ibdom, e un po 'di sfondo/storia qui: Recommended JavaScript HTML template library for JQuery?

Answer 10

poteva sempre andare con jQuery-Templates: http://api.jquery.com/category/plugins/templates/

Answer 11

Poiché non v'è API non ben definita e una migliore libreria per template, vorrei suggerire ne scegli uno attivamente sviluppato. Di seguito, ho brevemente spiegato due librerie che sono attivamente in fase di sviluppo.

jQuery team ha deciso che jQuery Templates non sarà più sviluppato o gestito attivamente, quindi suggerirei di NON utilizzarlo. Vedi this blog entry.

È possibile utilizzare JsRender in conformità con JsViews per sfruttare tutte le funzionalità fornite da jQuery Templates e ancor più come il collegamento dati. Puoi trovare demo per JsRender e JsViews. Suggerisco di utilizzare queste librerie poiché sono attivamente sviluppate dal team di jQuery UI, ma sappi che non sono ancora nemmeno in versione beta!

Moustache è un'altra soluzione di templating che è attivamente in fase di sviluppo e semplifica i template combinando tag condizionali e tag di enumerazione. Fornisce anche funzionalità avanzate come sezioni invertite, parziali e sezioni di alto ordine con sintassi semplice. Moustache è anche una delle soluzioni di modelli più veloci See blog by Brian Landau. Personalmente, trovo i baffi una buona soluzione per i template, poiché ha una sintassi semplice e funziona bene.

Answer 12

Che dire http://www.enfusion-framework.org

cose come questa:

<span template>Our telephone number is {phone}.</span> 

<span session>You are logged in as {nickname}.</span>