jquery e tag modello HTML5

Question

Desidero utilizzare la funzione di template di underscorejs. Sembra tag di HTML5 <template> sarebbe una misura sorprendente per questo, ma c'è un intoppo ... I tag underscorejs interpolazione (<% e %> get HTML escape, quindi HTML all'interno di un tag modello si presenta in questo modo:

$('template.new-email').html() 

=>

" 
    <div class="email"> 
    <div class="timestamp"> 
     &lt;%= received %&gt; 
    </div> 
    <div class="from"> 
     &lt;%= from %&gt; 
    </div> 
    <div class="title"> 
     &lt;%= title %&gt; 
    </div> 
    <div class="message"> 
     &lt;%= message %&gt; 
    </div> 
    </div> 
" 

Beh, che schifo.

Ora, a quanto pare, se uso un tag script con un tipo fittizio, come "x-underscore- modelli", allora sembra rose e fiori:

$('.new-email').html() 

=>

" 
    <div class="email"> 
    <div class="timestamp"> 
     <%= received %> 
    </div> 
    <div class="from"> 
     <%= from %> 
    </div> 
    <div class="title"> 
     <%= title %> 
    </div> 
    <div class="message"> 
     <%= message %> 
    </div> 
    </div> 
" 

Quindi la mia domanda è - posso usare il tag modello? Come faccio a ottenere solo i caratteri che mi servono, in una stringa, così posso passarli al sistema di template di underscore?

Nota: poiché il server che sto utilizzando in questo momento è un server hapijs/nodo che utilizza il manubrio come sistema di template sul lato server, non posso usare solo {{e}}.

Answer 1

Mi piace anche l'idea di utilizzare un tag di modello e ho cercato di far funzionare i modelli di sottolineatura nell'elemento HTML5 in vari modi. Sfortunatamente, lo template element significa in particolare un modello html e il contenuto verrà trasformato in un frammento di documento che non è appropriato per molti modelli di underscore validi anche se successivamente renderanno il codice HTML valido.

Di conseguenza, l'unico utilizzo che posso suggerire è che si potrebbe tenere gli elementi script organizzati all'interno di un elemento template in questo modo:

<template class="underscore-templates"> 
<script id="new-email"> 
    <div class="email"> 
    <div class="timestamp"> 
     <%= received %> 
    </div> 
    <div class="from"> 
     <%= from %> 
    </div> 
    <div class="title"> 
     <%= title %> 
    </div> 
    <div class="message"> 
     <%= message %> 
    </div> 
    </div> 
</script> 
<script id="other"> 
</script> 
</template> 

E poi si sono segregati per fare in modo sicuro le cose come:

var templates = $('.underscore-templates').prop('content'); 
_.template($(templates).children('#new-email').html(), {...}); 

con l'elemento modello che funge da ambito per evitare i normali problemi di collisione di id e l'esecuzione di questi modelli come script.

(Eppure, questo sarebbe limitato ai browser moderni senza una bella approfondita indagine di come (o forse se) è possibile recuperare gli elementi del modello di contenuto nei browser più anziani e renderlo in un frammento ricercabile.)