Modelo Backbone

por Mads Kristensen

O Modelo Backbone SPA foi escrito por Kazi Manzur Rashid

Descarregue o Modelo Backbone.js SPA

O modelo Backbone.js SPA foi concebido para o ajudar a começar rapidamente a construir aplicações web interativas do lado do cliente usando Backbone.js.

O modelo fornece um esqueleto inicial para desenvolver uma aplicação Backbone.js em ASP.NET MVC. De fábrica, oferece funcionalidade básica de login de utilizador, incluindo registo, início de sessão, redefinição de palavra-passe e confirmação de utilizador com modelos básicos de email.

Requisitos:

• Atualização ASP.NET e Web Tools 2012.2

Criar um Projeto de Modelo Backbone

Descarregue e instale o modelo clicando no botão de Download acima. O modelo está empacotado como um ficheiro Visual Studio Extension (VSIX). Pode ser necessário reiniciar o Visual Studio.

No painel de Modelos, selecione Modelos Instalados e expanda o nó Visual C#. Em Visual C#, selecione Web. Na lista de modelos de projeto, selecione ASP.NET Aplicação Web MVC 4. Nomeia o projeto e clica em OK.

No assistente de Novo Projeto, selecione o Projeto SPA Backbone.js.

Prima Ctrl-F5 para construir e executar a aplicação sem depuração, ou carrega em F5 para correr com depuração.

Clicar em "A Minha Conta" abre a página de login:

Guia Passo-a-Passo: Código do Cliente

Comecemos pelo lado do cliente. Os scripts de aplicação cliente estão localizados na pasta ~/Scripts/application. A aplicação é escrita em ficheiros TypeScript (.ts) que são compilados para JavaScript (ficheiros.js).

Aplicação

Application é definido em application.ts. Este objeto inicializa a aplicação e atua como o namespace raiz. Mantém informações de configuração e estado que são partilhadas pela aplicação, como se o utilizador tem sessão iniciada.

O application.start método cria as vistas modais e anexa handlers de eventos para eventos ao nível da aplicação, como o login do utilizador. De seguida, cria o router predefinido e verifica se algum URL do lado do cliente está especificado. Se não, redireciona para a URL padrão (#!/).

Events

Os eventos são sempre importantes ao criar componentes de fraco acoplamento. As aplicações frequentemente realizam múltiplas operações em resposta a uma ação do utilizador. O Backbone fornece eventos incorporados com componentes como Model, Collection e View. Em vez de criar interdependências entre estes componentes, o modelo utiliza um modelo "pub/sub": o events objeto, definido em events.ts, atua como um hub de eventos para publicar e subscrever eventos da aplicação. O events objeto é um singleton. O seguinte código mostra como subscrever um evento e depois desencadeá-lo:

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

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

Router

Em Backbone.js, um router fornece métodos para encaminhar páginas do lado do cliente e ligá-las a ações e eventos. O modelo define um único router, em router.ts. O router cria as vistas ativáveis e mantém o estado ao mudar de vistas. (As vistas ativáveis são descritas na secção seguinte.) O projeto inicialmente conta com duas vistas fictícias, Home e About. Tem também uma vista NotFound, que é exibida caso a rota não seja conhecida.

Views

As vistas são definidas em ~/Scripts/application/views. Existem dois tipos de perspetivas: perspetivas ativáveis e perspetivas de diálogo modal. As vistas ativáveis são invocadas pelo roteador. Quando uma vista ativada é mostrada, todas as outras vistas ativadas tornam-se inativas. Para criar uma vista ativa, estenda-a com o Activable objeto:

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

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

Estender com Activable adiciona dois novos métodos à vista, activate e deactivate. O router chama estes métodos para ativar e desativar a vista.

As visualizações modais são implementadas como diálogos modais do Bootstrap do Twitter. As vistas Membership e Profile são modais. As visualizações do modelo podem ser invocadas por quaisquer eventos de aplicação. Por exemplo, na visualização Navigation, clicar no link "A Minha Conta" mostra a visualização Membership ou a visualização Profile, dependendo se o utilizador está com sessão iniciada ou não. Anexa Navigation handlers de eventos de clique a quaisquer elementos filhos que tenham o data-command atributo. Aqui está a marcação HTML:

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

Aqui está o código em navigation.ts para conectar os 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

Os modelos são definidos em ~/Scripts/application/models. Os modelos têm três coisas básicas: atributos predefinidos, regras de validação e um ponto final do lado do servidor. Aqui está um exemplo 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 };
        }
    }
}

Plug-ins

A pasta ~/Scripts/application/lib contém alguns plug-ins jQuery úteis. O ficheiro form.ts define um plug-in para trabalhar com dados de formulários. Muitas vezes é necessário serializar ou desserializar dados de formulário e mostrar quaisquer erros de validação de modelos. O plug-in form.ts tem métodos como serializeFields, deserializeFields, e showFieldErrors. O exemplo seguinte mostra como serializar uma forma para um 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.'
        });
    }
});

O plug-in flashbar.ts fornece vários tipos de mensagens de feedback ao utilizador. Os métodos são $.showSuccessbar, $.showErrorbar e $.showInfobar. Nos bastidores, usa alertas do Twitter Bootstrap para mostrar mensagens bem animadas.

O plug-in confirm.ts substitui o diálogo de confirmação do navegador, embora a API seja um pouco diferente:

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

Passo a Passo: Código do Servidor

Agora vamos olhar para o lado do servidor.

Controllers

Numa aplicação de página única, o servidor desempenha apenas um papel pequeno na interface do utilizador. Normalmente, o servidor renderiza a página inicial e depois envia e recebe dados JSON.

O modelo tem dois controladores MVC: HomeController renderiza a página inicial e SupportsController é usado para confirmar novas contas de utilizador e redefinir palavras-passe. Todos os outros controladores do template são controladores ASP.NET Web API, que enviam e recebem dados JSON. Por defeito, os controladores usam a nova WebSecurity classe para realizar tarefas relacionadas com o utilizador. No entanto, também têm construtores opcionais que permitem passar delegados para estas tarefas. Isto torna os testes mais fáceis e permite-lhe substituir WebSecurity por outra coisa, usando um Contentor IoC. Aqui está um exemplo:

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
}

Views

As vistas são concebidas para serem modulares: cada secção de uma página tem a sua própria vista dedicada. Numa aplicação de página única, é comum incluir vistas que não têm qualquer controlador correspondente. Pode incluir uma vista chamando @Html.Partial('myView'), mas isso torna-se cansativo. Para facilitar isto, o modelo define um método auxiliar, IncludeClientViews, que renderiza todas as vistas numa pasta especificada:

@Html.IncludeClientViews('yourViewFolder')

Se o nome da pasta não for especificado, o nome padrão da pasta é "ClientViews". Se a sua vista de cliente também usar vistas parciais, nomeie a vista parcial com um carácter de sublinhado (por exemplo, _SignUp). O IncludeClientViews método exclui quaisquer vistas cujo nome comece por sublinhado. Para incluir uma vista parcial na vista do cliente, chame Html.ClientView('SignUp') em vez de Html.Partial('_SignUp').

Enviar Email

Para enviar emails, o modelo usa Postal. No entanto, o Postal é abstraído do resto do código da IMailer interface, por isso pode facilmente substituí-lo por outra implementação. Os modelos de email encontram-se na pasta Views/Emails. O endereço de email do remetente é especificado no ficheiro web.config, na sender.email chave da secção appSettings . Além disso, quando debug="true" em web.config, a aplicação não requer confirmação por email do utilizador, para acelerar o desenvolvimento.

GitHub

Também pode encontrar o modelo Backbone.js SPA no GitHub.