Uso de plantillas de Jade en Backbone.js

Question

Me encanta la sintaxis tipo HAML del motor de plantillas de Jade en Node.js, y me encantaría usarlo en el lado del cliente dentro de Backbone.js.

He visto Backbone comúnmente utilizando plantillas Underscore.js en el siguiente estilo.

/* 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> 

Lo que me gustaría ver es una manera de utilizar AJAX (o algún otro método) a buscar plantillas de Jade y hacerlos dentro del código HTML actual.

Answer 1

Pude ejecutar el lado del cliente de Jade utilizando el proyecto jade-browser.

La integración con Backbone es entonces simple: en lugar de _template() estoy usando jade.compile().

HTML (scripts y plantilla):

<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 (integración 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 es el código.

Answer 2

Como @dzejkej mencionado anteriormente, una de las formas más conocidas de usar plantillas de Jade en el cliente es usar el navegador de jade; sin embargo, siempre he tenido algunos problemas con Jade en el navegador.

• Compilación de plantillas de Jade es lenta - lo cual está bien, pero en realidad, todas las plantillas deben almacenarse en caché, y si se les almacena en caché en el cliente, en cualquier momento que carga una nueva página, la memoria caché desaparece (a menos que el uso de HTML5 almacenamiento persistente, por ejemplo).
• El archivo incluye puede ser un problema y puede crear exceso de hinchazón. Si está compilando plantillas de Jade en el navegador y la plantilla contiene include declaraciones, es posible que deba hacer un trabajo adicional para que compilen correctamente. Además, si decide compilar en el servidor y enviar JavaScript al cliente, todavía tiene problemas. Cada vez que las plantillas de Jade utilizan el archivo incluye, las plantillas de Jade compiladas pueden ser bastante grandes porque contienen el mismo código una y otra vez. Por ejemplo, si incluye el mismo archivo una y otra vez, el contenido de ese archivo se descargará al navegador varias veces, lo que está desperdiciando ancho de banda.
• Falta de compatibilidad - Jade ofrece poco soporte para las plantillas del lado del cliente. Sí, puede usar la opción del compilador {client: true}, pero las plantillas compiladas en realidad no están optimizadas para el cliente, y además, no hay ningún mecanismo para enviar plantillas compiladas de Jade al navegador.

Estas son algunas de las razones por las que creé el Blade project. Blade es un lenguaje de plantillas similar a Jade que admite plantillas del lado del cliente desde el primer momento. Incluso se envía con Express middleware designed for serving compiled templates to the browser. Si está de acuerdo con una alternativa similar a Jade para sus proyectos, ¡compruébelo!

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

Answer 3

acabo de código abierto un proyecto nodejs, llamado "activo-rack", que se puede precompilar plantillas de jade y les ofrecen en el navegador como Javascript funciones.

Esto significa que el procesamiento es sorprendentemente rápido, incluso más rápido que las micro-plantillas porque no hay un paso de compilación en el navegador.

La arquitectura es un poco diferente de lo que mencionas, solo un archivo js para todas las plantillas llamadas "templates.js" o lo que quieras.

Puede verificarlo aquí, https://github.com/techpines/asset-rack#jadeasset

Primero lo configura en el servidor de la siguiente manera:

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

Si directorio de plantillas se veía así:

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

Entonces todas sus plantillas entran en el navegador debajo de la variable "Plantillas":

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

De todos modos, espero que ayude.

Answer 4

También puede consultar mi nueva biblioteca de jade en el navegador. Es tan simple como < jade> ... </jade>. https://github.com/charlieamer/jade-query

Answer 5

no obtendrá el poder de las plantillas de Jade, pero se puede entrar ilegalmente en él un poco para llegar a jade adecuadamente las plantillas de subrayado de salida, la clave es la prevención de jade se escapen los <%> etiquetas con el operador !, como el siguiente:

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