Utilizzo di modelli di giada in Backbone.js

Question

Mi piace la sintassi simile a HAML del motore di template di Jade in Node.js e mi piacerebbe usarlo lato client all'interno di Backbone.js.

Ho visto Backbone comunemente utilizzando il template Underscore.js nel seguente stile.

/* Tunes.js */ 
window.AlbumView = Backbone.View.extend({ 
    initialize: function() { 
    this.template = _.template($('#album-template').html()); 
    }, 

    // ... 
}); 

/* Index.html */ 
<script type="text/template" id="album-template"> 
    <span class="album-title"><%= title %></span> 
    <span class="artist-name"><%= artist %></span> 
    <ol class="tracks"> 
    <% _.each(tracks, function(track) { %> 
     <li><%= track.title %></li> 
    <% }); %> 
    </ol> 
</script> 

Quello che mi piacerebbe vedere è un modo per utilizzare AJAX (o qualche altro metodo) per andare a prendere i modelli di Jade e renderli all'interno del HTML corrente.

Answer 1

Sono stato in grado di eseguire Jade lato client utilizzando il progetto jade-browser.

L'integrazione con Backbone è quindi semplice: anziché _template() Sto utilizzando jade.compile().

HTML (script e template):

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script> 
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script> 
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> 

<script type="template" id="test"> 
div.class1 
    div#id 
    | inner 
    div#nav 
    ul(style='color:red') 
     li #{item} 
     li #{item} 
     li #{item} 
     li #{item} 
script 
    $('body').append('i am from script in jade') 
</script> 

JavaScript (integrazione con Backbone.View):

var jade = require("jade"); 

var TestView = Backbone.View.extend({ 

    initialize: function() { 
    this.template = jade.compile($("#test").text()); 
    }, 

    render: function() { 
    var html = this.template({ item: 'hello, world'}); 
    $('body').append(html); 
    } 
}); 

var test = new TestView(); 
test.render(); 

HERE è il codice.

Answer 2

Come @dzejkej menzionato sopra, uno dei modi più conosciuti per utilizzare i modelli di giada sul client consiste nell'utilizzare il jade-browser; tuttavia, ho sempre avuto alcuni problemi con Jade nel browser.

• Compilazione modelli Jade è lento - che va bene, ma in realtà, tutti i modelli dovrebbero essere memorizzati nella cache, e se li cache del cliente, in qualsiasi momento si caricano di una nuova pagina, la cache scompare (a meno di utilizzare HTML5 archiviazione persistente, ad esempio).
• Il file include può essere un dolore e può creare eccessivo gonfiarsi. Se si stanno compilando i modelli di giada sul browser e il modello contiene le dichiarazioni include, potrebbe essere necessario eseguire alcuni lavori extra per farli compilare correttamente. Inoltre, se si decide di compilare il server e inviare JavaScript al client, si riscontrano ancora problemi. Ogni volta che i modelli di Giada usano il file include, i modelli Jade compilati possono diventare piuttosto grandi perché contengono lo stesso codice più e più volte. Ad esempio, se si include lo stesso file più e più volte, il contenuto di quel file verrà scaricato nel browser più volte, il che sta sprecando larghezza di banda.
• Mancanza di supporto - Jade fornisce un piccolo supporto per i modelli lato client pronti all'uso. Sì, è possibile utilizzare l'opzione del compilatore {client: true}, ma i modelli compilati non sono realmente ottimizzati per il client e inoltre non esiste alcun meccanismo per la pubblicazione di modelli Jade compilati nel browser.

Questi sono alcuni dei motivi per cui ho creato il Blade project. Blade è un linguaggio di template simile a Jade che supporta i modelli lato client immediatamente. Viene fornito anche con Express middleware designed for serving compiled templates to the browser. Se stai bene con un'alternativa Jade per i tuoi progetti, dai un'occhiata!

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage

Answer 3

Ho appena open source un progetto nodejs, chiamato "asset-rack", che può può precompilare modelli giada e offrire loro nel browser come JavaScript funzioni.

Ciò significa che il rendering è incredibilmente veloce, anche più veloce dei micro-modelli perché non c'è alcun passo di compilazione nel browser.

L'architettura è un po 'diversa da ciò che hai menzionato, solo un file js per tutti i modelli chiamati "templates.js" o qualsiasi altra cosa tu voglia.

Puoi verificarlo qui, https://github.com/techpines/asset-rack#jadeasset

In primo luogo lo si imposta sul server come segue:

new JadeAsset({ 
    url: '/templates.js', 
    dirname: __dirname + '/templates' 
}); 

Se directory dei modelli si presentava così:

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

Poi tutti i tuoi modelli sono disponibili nel browser sotto la variabile "Modelli":

$('body').append(Templates.navbar()); 
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'}); 
$('body').append(Templates.footer()); 

In ogni caso, spero che sia d'aiuto.

Answer 4

Si potrebbe anche eseguire il checkout della mia nuova libreria per jade all'interno del browser. È semplice come < jade> ... </jade>. https://github.com/charlieamer/jade-query

Answer 5

non sarà possibile ottenere tutta la potenza di modelli di giada, ma si può incidere un po 'per ottenere giada correttamente modelli di sottolineatura di uscita, la chiave sta impedendo la fuoriuscita di giada i <%> tag con l'operatore !, in questo modo:

script#dieTemplate(type='text/template') 
    .die(class!='value-<%= value %>') 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-star