Lado del cliente + plantillas del lado del servidor, me parece mal, ¿cómo optimizar?

Question

En la aplicación web que estoy creando, uso el clásico Express + Jade para representar páginas de clientes y también expongo algunas API REST (digamos: "API de listas de usuarios").

Estas páginas de cliente utilizan API proporcionada para recuperar "lista de usuarios" y mostrarla. Para mostrarlo, utilizo la biblioteca de plantillas de manillar una vez que se recuperan los datos.

Me parece un poco sucio, usando dos motores de plantillas, analizando el código dos veces, ¿cómo hacerlo mejor?

Nota: Ya optimicé la cosa enviando los datos iniciales dentro de la página del cliente insertándola una variable de secuencia de comandos. Esta variable se muestra de la misma manera que los datos recibidos por la API. La API solo se usa en caso de actualización de datos.

ACTUALIZACIÓN: usando jade tanto el servidor como el lado del cliente es una buena idea, pero ¿cómo separar/especificar? ¿Qué parte de la plantilla representada debe hacerse al servir la página y qué parte usará el cliente?

Answer 1

Eso es muy fácil de usar. Lado del cliente + plantilla del servidor. Cuando estamos construyendo algunas aplicaciones web, debemos usar ajax para obtener algunos datos y usar la función de devolución de llamada para manejarlo. Así que deberíamos renderizar estos datos en lado del cliente.

La pregunta es cómo presentarlos en el lado del cliente?

Ahora solo necesitamos un lado del cliente jade.js.

Siga este documento: https://github.com/visionmedia/jade#readme

Primera

git clone https://github.com/visionmedia/jade.git 

Segunda

$ make jade.js (in fact the project has already compile the file for us) 

so we just need to copy this file to the path that we use. 

Tercer

read my demo below : 

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script> 
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script> 
<script type='template' id='test'> 
ul 
    li hello world 
    li #{item} 
    li #{item} 
    li #{item} 
</script> 
<script> 
    var compileText = $("#test").text(); 
    console.log(typeof(compileText)); 
    var fn = jade.compile(compileText , { layout : false }); 
    var out = fn({item : "this is item " }); 
    console.log(out); 
    $("body").append(out); 
</script> 

ya se puede ver el resultado de salida en el cuerpo

hello world 
this is item 
this is item 
this is item 

Después de leer esta demo pienso que usted sabe cómo para separar del lado del servidor y el cliente de jade side.If se puede entender cuál compilar el plantilla de jade, entonces todas las preguntas son fáciles.

Quizás tenga otra pregunta ahora.¿Cómo escribir algunos códigos de plantilla de jade en * .jade? El documento también nos proporciona una forma de hacerlo. Este tutorial puede ayudarlo.

index.jade

!!!5 
html 
    head 
    title hello world 
    body 
    ul#list 

    script#list-template(type='template') 
     |- for(var i in data) 
     | li(class='list') \#{ data[i].name } 
     |- } 

index.js

/* you javascript code */ 
var compileText = $('#list-template').text(); 
var compile = jade.compile(compileText , { layout : false }); 

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }]; 
var outputText = compile(data); 

$("#list").append(outputText); 

Answer 2

Utilice el motor de plantillas http://github.com/flatiron/plates que funcionará tanto en el lado del cliente como en el servidor.

Answer 3

Hace unas semanas escribí un paquete npm para plantillas de manubrios para compartirlos entre el cliente y el servidor. Es bastante básico, pero ha estado trabajando muy bien para mí hasta ahora:

https://github.com/jwietelmann/node-handlebars-precompiler

Editar: estoy usando separado "BA", como el paquete de representación del lado del servidor. El precompilador solo entrega plantillas precompiladas en mi directorio público javascripts cada vez que actualizo mis vistas hbs.