Pasando MVC modelo de datos para el lado del cliente Código mecanografiado

Question

Cuando se utiliza MVC, a veces pasan los datos del modelo del servidor para el JavaScript del lado cliente mediante el uso de la maquinilla de afeitar inyecta en el código JavaScript, de la siguiente manera:

<script type="text/javascript"> 
    var myClientGuid = '@Model.MyServerGuid'; 
</script> 

Este conjuntos una variable de JavaScript denominada myClientGuid con el valor de la propiedad del modelo del lado del servidor MyServerGuid. Cuando llega al cliente, el código se ve más o menos así dentro del navegador:

<script type="text/javascript"> 
    var myClientGuid = 'EF0077AB-0482-4D91-90A7-75285F01CA6F'; 
</script> 

Esto permite que los archivos JavaScript externos utilicen esta variable.

Mi pregunta es, en TypeScript, desde todos los códigos deben estar referenciados a través de archivos externos, ¿cuál es la mejor forma de pasar los campos del lado del servidor al código TypeScript? Los archivos de código externo no pueden contener código Razor. ¿Debería usar la misma técnica que la anterior, en la Vista, mezclando JavaScript y Typescript dentro del proyecto?

Answer 1

El compilador de TypeScript solo necesita saber que existen los campos del lado del servidor. La manera más fácil de hacerlo es usar declaraciones ambientales (ver la sección 10 de la especificación). Por ejemplo, si usted tenía un archivo ts que necesitaba usar myClientGuid, se podría hacer

declare var myClientGuid: string; 

en la parte superior de su archivo principal Ts. El compilador no generará código para esta declaración de var, por lo que no afectará nada. Ahora, cualquier archivo que haga referencia a ese archivo .ts sabrá que hay una cadena myClientGuid disponible en el alcance global.

Answer 2

Otra solución (para evitar las variables globales) es envolver el código de transcripción en una función que toma los campos del lado del servidor necesarios como parámetros:

En fichero de transcripción:

function setupMyPage(myGuid:string) { 
    ... 
} 

En .cshtml :

<script src='@Url.Content("<path-to-typescript>")'></script> 
<script> 
    setupMyPage('@Model.MyServerGuid'); 
</script> 

Si está utilizando RequireJS, también puede exportar la función setupMyPage como un módulo, para evitar la adición de la función a lo global na mespace:

En fichero de transcripción:

export = setupMyPage; 

En .cshtml:

<script> 
    require(['@Url.Content("<path-to-typescript>")'], function(setupMyPage) { 
     setupMyPage('@Model.MyServerGuid'); 
    }; 
</script>