Compartir a través de

Plantilla de Hot Towel

  • Artículo

por Mads Kristensen

La plantilla MVC de Hot Towel está escrita por John Papa

Elija qué versión desea descargar:

Plantilla MVC de Hot Towel para Visual Studio 2012

Plantilla MVC de Hot Towel para Visual Studio 2013

Hot Towel: ¡Porque no querrá ir al SPA sin una!

¿Quiere compilar una SPA pero no sabe por dónde empezar? Use Hot Towel y en segundos tendrá una SPA y todas las herramientas que necesita para compilar en ella.

Hot Towel crea un magnífico punto de partida para compilar una aplicación de página única (SPA) con ASP.NET. De fábrica, proporciona una estructura modular para el código, la navegación de vistas, el enlace de datos, la administración de datos enriquecida y el estilo sencillo pero elegante. Hot Towel le proporciona todo lo que necesita para compilar una SPA, para que pueda centrarse en su aplicación, no en otros problemas.

Obtenga más información sobre cómo desarrollar una SPA con los vídeos, tutoriales y cursos de Pluralsight de John Papa.

Estructura de la aplicación

Hot Towel SPA proporciona una carpeta App que contiene los archivos JavaScript y HTML que definen su aplicación.

Dentro de la carpeta de la aplicación:

  • durandal
  • services
  • viewmodels
  • views

La carpeta App contiene una colección de módulos. Estos módulos encapsulan la funcionalidad y declaran dependencias de otros módulos. La carpeta views contiene el HTML de su aplicación y la carpeta viewmodels contiene la lógica de presentación de las vistas (un patrón MVVM habitual). La carpeta de servicios es ideal para alojar cualquier servicio común que pueda necesitar su aplicación, como la recuperación de datos HTTP o la interacción con el almacenamiento local. Es habitual que varios viewmodels reutilicen código de los módulos de servicio.

Estructura de la aplicación de ASP.NET MVC del lado del servidor

Hot Towel se desarrolla sobre la conocida y potente estructura de ASP.NET MVC.

  • App_Start
  • Contenido
  • Controladores
  • Modelos
  • Scripts
  • Vistas

Instalación mediante la plantilla de Hot Towel SPA de Visual Studio 2012

Hot Towel puede instalarse como plantilla de Visual Studio 2012. Solo tiene que hacer clic en File | New Project y elegir ASP.NET MVC 4 Web Application. Después seleccione la plantilla "Aplicación de página única de Hot Towel" y ejecútela.

Instalación a través del paquete NuGet

Hot Towel es también un paquete NuGet que aumenta un proyecto de ASP.NET MVC vacío existente. Solo tiene que instalar con Nuget y ejecutar.

Install-Package HotTowel

¿Cómo puedo compilar en Hot Towel?

Simplemente empiece a agregar código.

  1. Agregue su propio código del lado del servidor, preferiblemente Entity Framework y WebAPI (que realmente brillan con Breeze.js)
  2. Agregue vistas a la carpeta App/views
  3. Agregue viewmodels a la carpeta App/viewmodels
  4. Agregue enlaces de datos HTML y Knockout a sus nuevas vistas
  5. Actualice las rutas de navegación en shell.js

Tutorial de HTML/JavaScript

Views/HotTowel/index.cshtml

index.cshtml es la vista y la ruta de inicio de la aplicación de MVC. Contiene todas las etiquetas meta estándar, vínculos css y referencias JavaScript que cabría esperar. El cuerpo contiene un único <div> que es donde se colocará todo el contenido (sus vistas) cuando se solicite. El @Scripts.Render usa Require.js para ejecutar el punto de entrada del código de la aplicación, que está contenido en el archivo main.js. Se proporciona una pantalla de presentación para demostrar cómo crear una pantalla de presentación mientras se carga su aplicación.

<body>
    <div id="applicationHost">
        @Html.Partial("_splash")
    </div>

    @Scripts.Render("~/scripts/vendor")
        <script type="text/javascript" src="~/App/durandal/amd/require.js" 
            data-main="@Url.Content("~/App/main")"></script>
</body>

App/main.js

El archivo main.js contiene el código que se ejecutará en cuanto se cargue su aplicación. Aquí es donde quiere definir sus rutas de navegación, configurar sus vistas de inicio y realizar cualquier configuración o arranque, como la preparación de los datos de su aplicación.

El archivo main.js define varios de los módulos de durandal para ayudar al inicio de la aplicación. La instrucción define ayuda a resolver las dependencias de los módulos para que estén disponibles para la función. Primero se habilitan los mensajes de depuración, que envían mensajes sobre los eventos que está realizando la aplicación a la ventana de la consola. El código app.start indica al marco durandal que inicie la aplicación. Las convenciones se establecen para que durandal sepa que todas las vistas y los modelos de vista están contenidos en las mismas carpetas con el mismo nombre, respectivamente. Por último, el app.setRoot inicia el shell mediante una animación de entrance predefinida.

define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system', 
        'durandal/plugins/router'],
    function (app, viewLocator, system, router) {

    // Enable debug message to show in the console 
    system.debug(true);

    app.start().then(function () {
        router.useConvention();
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

Vistas

Las vistas se encuentran en la carpeta App/views.

shell.html

El shell.html contiene el diseño maestro para su HTML. Todas las demás vistas se compondrán en algún lugar lateral de su vista shell. Hot Towel proporciona un shell con tres regiones de este tipo: un encabezado, un área de contenido y un pie de página. Cada una de estas regiones se carga con contenidos de otras vistas cuando se solicita.

Los enlaces de compose para el encabezado y el pie de página están codificados de forma rígida en Hot Towel para apuntar a las vistas nav y footer, respectivamente. El enlace de composición de la sección #content está vinculado al elemento activo del módulo router. En otras palabras, al hacer clic en un vínculo de navegación, la vista correspondiente se carga en esta área.

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

El nav.html contiene los vínculos de navegación para la SPA. Aquí se puede colocar, por ejemplo, la estructura del menú. A menudo se trata de datos enlazados (usando Knockout) al módulo router para mostrar la navegación que definió en el shell.js. Knockout busca los atributos data-bind y los enlaza al modelo de vista shell para mostrar las rutas de navegación y para mostrar una barra de progreso (usando Twitter Bootstrap) si el módulo router está en medio de la navegación de una vista a otra (ver router.isNavigating).

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

home.html y details.html

Estas vistas contienen HTML para vistas personalizadas. Al hacer clic en el vínculo home del menú de la vista nav, la vista home se situará en el área de contenido de la vista shell. Estas vistas pueden aumentarse o sustituirse por sus propias vistas personalizadas.

footer.html

El footer.html contiene HTML que aparece en el pie de página, en la parte inferior de la vista shell.

ViewModels

Los modelos de vista se encuentran en la carpeta App/viewmodels.

shell.js

El modelo de vista shell contiene propiedades y funciones que están vinculadas a la vista de shell. A menudo es aquí donde se encuentran los enlaces de navegación del menú (ver la lógica de router.mapNav).

define(['durandal/system', 'durandal/plugins/router', 'services/logger'],
    function (system, router, logger) {
        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            return boot();
        }

        function boot() {
            router.mapNav('home');
            router.mapNav('details');
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }
    });

home.js y details.js

Estos modelos de vista contienen las propiedades y las funciones que están vinculadas a la vista de home. También contiene la lógica de presentación de la vista y es el pegamento entre los datos y la vista.

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View'
    };

    return vm;

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
});

Servicios

Los servicios se encuentran en la carpeta App/services. Lo ideal es que se coloquen los servicios futuros, como un módulo de servicio de datos, que es responsable de obtener y publicar datos remotos.

logger.js

Hot Towel proporciona un módulo de logger en la carpeta de servicios. El módulo logger es ideal para registrar mensajes en la consola y para el usuario en ventanas emergentes.