Plantilla de base

de Mads Kristensen

The Backbone SPA Template fue escrito por Kazi Manzur Rashid

Descarga de la plantilla de SPA de Backbone.js

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

La plantilla proporciona un esqueleto 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 troncal

Descargue e instale la plantilla haciendo clic en el botón Descargar anterior. 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 ASP.NET aplicación web MVC 4. Asigne 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 la 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 en la aplicación, como si el usuario ha iniciado sesión.

El application.start método 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. La red troncal proporciona eventos integrados con componentes como Model, Collection y View. En lugar de crear dependencias entre estos componentes, la plantilla usa un modelo "pub/sub": el events objeto, definido en events.ts, actúa como un centro de eventos para publicar y suscribirse a eventos de aplicación. El events objeto 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 enrutar 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 de. También tiene una vista NotFound, que se muestra si no se conoce la ruta.

Views

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 Activable objeto :

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 modales. Cualquier evento de aplicación puede invocar vistas de modelo. Por ejemplo, en la Navigation vista, al hacer clic en el vínculo "Mi cuenta" se muestra la Membership vista o la Profile vista, en función de si el usuario ha iniciado sesión. Adjunta los controladores de eventos de clic a cualquier elemento secundario que tenga el atributo data-command. Este es el etiquetado 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. 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, deserializeFieldsy 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 agradables y animados.

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.

Controllers

En una sola aplicación de 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 ASP.NET controladores de API web, que envían y reciben datos JSON. De forma predeterminada, los controladores usan la nueva WebSecurity clase 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 auxiliar, , IncludeClientViewsque 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 de subrayado (por ejemplo, _SignUp). El IncludeClientViews método excluye las vistas cuyo nombre comienza por un carácter de subrayado. Para incluir una vista parcial en la vista de cliente, llame a Html.ClientView('SignUp') en lugar de Html.Partial('_SignUp').

Envío de correo electrónico

Para enviar correo electrónico, la plantilla usa Postal. Sin embargo, Postal se abstrae del resto del código con la IMailer interfaz , 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 sender.email clave de la sección appSettings . Además, cuando debug="true" en web.config, la aplicación no requiere confirmación por correo electrónico del usuario, para acelerar el desarrollo.

GitHub (en inglés)

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