¿Cómo puedo compartir plantillas entre mi backend ASP.NET MVC y mi interfaz backbone.js?

Question

estoy buliding una aplicación en ASP.NET MVC y teniendo en cuenta Backbone.js para la interacción del cliente, etc ..

Lo ideal sería que cuando las páginas se cargan me gustaría tener todo el contenido existente en la pre-renderizados el lado del servidor y luego cualquier contenido nuevo representado por backbone.js sobre la marcha.

Naturalmente, realmente no quiero escribir mis plantillas dos veces.

Estoy considerando tener la mayoría de las plantillas de la aplicación utilizando el motor de visión de afeitar y luego usar plantillas de bigote para las áreas pequeñas que deben compartirse entre el servidor y la interfaz.

Mi pregunta es, ¿cómo se ve la implementación técnica real de este aspecto?

¿Puede proporcionar muestras de código de cómo lograría esto?

Por ejemplo, qué biblioteca usaría para representar la plantilla en el servidor y luego extraería manualmente el texto del archivo de la plantilla e insertarlo en el javascript?

Answer 1

No es tanto una técnica como una respuesta funcional ver mi respuesta aquí por un flujo funcional que incorpora la representación en servidor y del lado del cliente (con bigote)

Accessibility and all these JavaScript frameworks

HTH,

Answer 2

Estoy evaluando Razor Client Templates (GitHub) en este momento. Está en la versión 0.7.0 y parece un poco frágil actualmente.

Le permite hacer referencia a vistas de maquinillas de afeitar individuales parciales como plantillas de JavaScript.

Como parte de un producto comercial, haremos todo lo posible para imprimir plantillas compatibles con Handlebars.js de nuestros parciales Razor.

Answer 3

Has considerado las plantillas jQuery, en nuestro proyecto las usamos y las encontré bastante útiles. De hecho, usamos este http://github.com/BorisMoore/jsviews, que es una versión poco optimizada de la plantilla jquery para renderizar en cadena. Tienes muchas demos allí. En el lado del servidor colocamos todas las plantillas en una vista parcial y la renderizamos.

Answer 4

Si desea una aplicación RESTy MVC, recomiendo ServiceStack. Hay un backbone w servicestack todo-app que puede ver-source en.

Hice algo similar (no usando bigote) donde el controlador emite el modelo como json para que funcione la red troncal.

Answer 5

Primero tomamos la decisión de incorporar v8 en MVC.net y WebApi e implementar las plantillas con guión bajo o bigote para mantener exactamente las mismas plantillas.

Incluso si tiene las mismas plantillas, la lógica de representación puede ser diferente y necesita constantemente refactorizar las plantillas, las vistas frontales y las vistas de fondo. Especialmente si estás haciendo una api restfull.

Finalmente, elegimos otra solución para proporcionar una alternativa que no sea javascript para requisitos de accesibilidad y seo utilizando un navegador sin cabeza (PhantomJs) para representar las páginas.

Es bastante fácil de implementar, necesita instalar PhantomJs en su servidor, agregar un javascript para representar completamente la página con todas las interacciones de javascript y servir el resultado html.

podemos encontrar un ejemplo de uso aquí: http://backbonetutorials.com/seo-for-single-page-apps/

El ejemplo es para Node.js pero es fácil de implementar con ASP

El guión fantasma que utilizamos es similar:

//phantom-server.js 

var page = require('webpage').create(); 
var system = require('system'); 

var lastReceived = new Date().getTime(); 
var requestCount = 0; 
var responseCount = 0; 
var requestIds = []; 
var startTime = new Date().getTime(); 

page.onResourceReceived = function (response) { 
    if(requestIds.indexOf(response.id) !== -1) { 
     lastReceived = new Date().getTime(); 
     responseCount++; 
     requestIds[requestIds.indexOf(response.id)] = null; 
    } 
}; 
page.onResourceRequested = function (request) { 
    if(requestIds.indexOf(request.id) === -1) { 
     requestIds.push(request.id); 
     requestCount++; 
    } 
}; 

// Open the page 
page.open(system.args[1], function() {}); 

var checkComplete = function() { 
    // We don't allow it to take longer than 5 seconds but 
    // don't return until all requests are finished 
    if((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 5000) { 
    clearInterval(checkCompleteInterval); 
    console.log(page.content); 
    phantom.exit(); 
    } 
} 
// Let us check to see if the page is finished rendering 
var checkCompleteInterval = setInterval(checkComplete, 1); 

También hay servicios que le brindan el mismo resultado: http://prerender.io/