Plantilla de Backbone

por Mads Kristensen

Plantilla de SPA de Backbone fue escrito por Kazi Manzur Rashid

Descargar la plantilla de SPA de Backbone.js

La plantilla de SPA de Backbone.js está diseñada para empezar a crear rápidamente aplicaciones web interactivas del lado cliente mediante Backbone.js.

Esta plantilla proporciona un esquema inicial para desarrollar una aplicación de Backbone.js en ASP.NET MVC. De fábrica, proporciona funcionalidad básica de inicio de sesión de usuario, incluido el registro de usuario, el inicio de sesión, el restablecimiento de contraseña y la confirmación de usuario con plantillas de correo electrónico básicas.

Requisitos:

• actualización de ASP.NET y Web Tools 2012.2

Creación de un proyecto de plantilla de Backbone

Descargue e instale la plantilla haciendo clic en el botón Descargar. La plantilla se empaqueta como un archivo de extensión de Visual Studio (VSIX). Es posible que tenga que reiniciar Visual Studio.

En el panel Plantillas, seleccione Plantillas instaladas y expanda el nodo Visual C#. En Visual C#, seleccione Web. En la lista de plantillas de proyecto, seleccione Aplicación web ASP.NET MVC 4. Proporcione un nombre al proyecto y haga clic en Aceptar.

En el asistente para Nuevo proyecto, seleccione proyecto SPA de Backbone.js.

Presione Ctrl-F5 para compilar y ejecutar la aplicación sin depurar o presione F5 para ejecutarla con depuración.

Al hacer clic en "Mi cuenta" se abre la página de inicio de sesión:

Tutorial: Código de cliente

Comencemos con el lado cliente. Los scripts de aplicación cliente se encuentran en la carpeta ~/Scripts/application. La aplicación se escribe en TypeScript (archivos .ts) que se compilan en JavaScript (archivos .js).

Aplicación

Application se define en application.ts. Este objeto inicializa la aplicación y actúa como el espacio de nombres raíz. Mantiene la información de configuración y estado que se comparte a través de la aplicación, por ejemplo, si el usuario hubiera iniciado sesión.

El método application.start crea las vistas modales y adjunta controladores de eventos para eventos de nivel de aplicación, como el inicio de sesión de usuario. A continuación, crea el enrutador predeterminado y comprueba si se especifica alguna dirección URL del lado cliente. Si no es así, se redirige a la dirección URL predeterminada (#!/).

Eventos

Los eventos siempre son importantes al desarrollar componentes acoplados flexiblemente. Las aplicaciones suelen realizar varias operaciones en respuesta a una acción del usuario. Backbone proporciona eventos integrados con componentes como Modelo, Colección y Vista. En lugar de crear interdependencias entre estos componentes, la plantilla usa un modelo "pub/sub": el objeto events, definido en events.ts, actúa como un centro de eventos para publicar y suscribirse a eventos de aplicación. El objeto events es un singleton. En el código siguiente se muestra cómo suscribirse a un evento y, a continuación, desencadenar el evento:

events.on('myEvent', (e: MyEventArg) => {
    // Do your work
});

// Later in the code
events.trigger('myEvent', { arg: 'myValue' });

Enrutador

En Backbone.js, un enrutador proporciona métodos para el enrutamiento de las páginas del lado cliente y conectarlas a acciones y eventos. La plantilla define un único enrutador, en router.ts. El enrutador crea las vistas activables y mantiene el estado al cambiar de vistas. (Las vistas activables se describen en la sección siguiente). Inicialmente, el proyecto tiene dos vistas ficticias, Inicio y Acerca. También tiene una vista No Encontrado, que se muestra si no se conoce la ruta.

Vistas

Las vistas se definen en ~/Scripts/application/views. Hay dos tipos de vistas, vistas activables y vistas de diálogo modal. El enrutador invoca las vistas activables. Cuando se muestra una vista activable, todas las demás vistas activables se vuelven inactivas. Para crear una vista activable, extienda la vista con el objeto Activable:

export class MyView extends Backbone.View {
    // Other implementation details
}

// Extending with Activable
_.extend(MyView.prototype, Activable);

Extender con Activable agrega dos métodos nuevos a la vista activate y deactivate. El enrutador llama a estos métodos para activar y desactivar la vista.

Las vistas modales se implementan como diálogos modales de Twitter Bootstrap. Las vistas Membership y Profile son vistas modales. Cualquier evento de aplicación puede invocar vistas modales. Por ejemplo, en la vista Navigation, al hacer clic en el vínculo "Mi cuenta" se muestra la vista Membership o la vista Profile, en función de si el usuario ha iniciado sesión. Navigation adjunta controladores de eventos clic a cualquier elemento secundario que tenga el atributodata-command. Este es el marcado HTML:

<li>
  <a href="#" data-command="myAccount">
    <i class="icon-user"></i> My Account
  </a>
</li>

Este es el código de navigation.ts para enlazar los eventos:

export class Navigation extends Backbone.View {
    // Other implementation details
    handleCommand(e: JQueryEventObject) {
        var command = $(e.currentTarget).attr('data-command');
        if (command) {
            events.trigger(command);
        }
    }
}
Navigation.prototype.events = () => {
    return {
        'click [data-command]': 'handleCommand'
    };
};

Modelos

Los modelos se definen en ~/Scripts/application/models. Todos los modelos tienen tres cosas básicas: atributos predeterminados, reglas de validación y un punto de conexión del lado servidor. Este es un ejemplo típico:

export class Session extends Backbone.Model {
    urlRoot() {
        return serverUrlPrefix + '/sessions'
    }

    defaults(): ISessionAttributes {
        return {
          email: null,
          password: null,
          rememberMe: false
        }
    }

    validate(attributes: ISessionAttributes): IValidationResult {
        var errors = {};

        if (!attributes.email) {
            Validation.addError(errors, 'email', 'Email is required.');
        }

        if (!attributes.password) {
            Validation.addError(errors, 'password', 'Password is required.');
        }

        if (!_.isEmpty(errors)) {
            return { errors: errors };
        }
    }
}

Complementos

La carpeta ~/Scripts/application/lib contiene algunos complementos jQuery útiles. El archivo form.ts define un complemento para trabajar con datos de formulario. A menudo, debe serializar o deserializar los datos de formulario y mostrar los errores de validación del modelo. El complemento form.ts tiene métodos como serializeFields, deserializeFields y showFieldErrors. En el ejemplo siguiente se muestra cómo serializar un formulario en un modelo.

// Here $el is the form element
// Hide existing errors if there is any
this.$el.hideSummaryError().hideFieldErrors();

// Subscribe invalid event which
// is fired when validation fails
model.on('invalid', () =>
    this.$el.showFieldErrors{(
        errors: model.validationError.errors;
    )}
);

model.save(this.$el.serializeFields(), {
    success: () => { }, // lets do something good
    error: (m, jqxhr: JQueryXHR) => {
        if (jqxhr.status === 400) { // bad request
            // Handle server side field errors
            var response = <any>$.parseJSON(jqxhr.responseText);
            if (response && _.has(response, 'ModelState')) {
                return this.$el.showFieldErrors({
                    errors: response.ModelState
                });
            }
        }

        // All other server errors
        this.$el.showSummaryError({
            message: 'An unexpected error has occurred while performing ' +
                'operation.'
        });
    }
});

El complemento flashbar.ts proporciona varios tipos de mensajes de comentarios al usuario. Los métodos son $.showSuccessbar, $.showErrorbar y $.showInfobar. En segundo plano, usa alertas de Twitter Bootstrap para mostrar mensajes animados agradables.

El complemento confirm.ts reemplaza el cuadro de diálogo de confirmación del explorador, aunque la API es algo diferente:

$.confirm({
    prompt: 'Are you sure you want to do it?',
    ok: => { //Do something useful },
    cancel: => { // Do something else }
)};

Tutorial: Código de servidor

Ahora, echemos un vistazo al lado del servidor.

Controladores

En una aplicación de una sola página, el servidor solo desempeña un papel pequeño en la interfaz de usuario. Normalmente, el servidor representa la página inicial y, a continuación, envía y recibe datos JSON.

La plantilla tiene dos controladores MVC: HomeController representa la página inicial y SupportsController se usa para confirmar nuevas cuentas de usuario y restablecer contraseñas. Todos los demás controladores de la plantilla son controladores de ASP.NET Web API, que envían y reciben datos JSON. De forma predeterminada, los controladores usan la nueva clase WebSecurity para realizar tareas relacionadas con el usuario. Sin embargo, también tienen constructores opcionales que permiten pasar delegados para estas tareas. Esto facilita las pruebas y le permite reemplazar WebSecurity por otra cosa mediante un Contenedor de IoC. Este es un ejemplo:

public class SessionsController : ApiController
{
    private readonly Func<string, string, bool, bool> signIn;
    private readonly Action signOut;

    public SessionsController() : this(WebSecurity.Login, WebSecurity.Logout)
    {
    }

    public SessionsController(
        Func<string, string, bool, bool> signIn,
        Action signOut)
    {
      this.signIn = signIn;
      this.signOut = signOut;
    }

    // Rest of the code
}

Vistas

Las vistas están diseñadas para ser modulares: cada sección de una página tiene su propia vista dedicada. En una aplicación de página única, es habitual incluir vistas que no tienen ningún controlador correspondiente. Puede incluir una vista llamando a @Html.Partial('myView'), pero esto se vuelve tedioso. Para facilitar esta tarea, la plantilla define un método asistente, IncludeClientViews, que representa todas las vistas de una carpeta especificada:

@Html.IncludeClientViews('yourViewFolder')

Si no se especifica el nombre de la carpeta, el nombre de carpeta predeterminado es "ClientViews". Si la vista de cliente también usa vistas parciales, asigne un nombre a la vista parcial con un carácter subrayado (por ejemplo, _SignUp). El método IncludeClientViews excluye las vistas cuyo nombre comienza por un carácter subrayado. Para incluir una vista parcial en la vista de cliente, llame a Html.ClientView('SignUp') en lugar de Html.Partial('_SignUp').

Enviar correo electrónico

Para enviar correo electrónico, la plantilla usa Postal. Sin embargo, Postal se abstrae del resto del código con la interfaz IMailer, por lo que puede reemplazarlo fácilmente por otra implementación. Las plantillas de correo electrónico se encuentran en la carpeta Views/Emails. La dirección de correo electrónico del remitente se especifica en el archivo web.config, en la clave sender.email de la sección appSettings. Además, cuando debug="true" se encuentra en web.config, la aplicación no requiere confirmación por correo electrónico de usuario, para acelerar el desarrollo.

GitHub

También puede encontrar la Plantilla de SPA de Backbone.js en GitHub.