Modello backbone

di Mads Kristensen

The Backbone SPA Template è stato scritto da Kazi Manzur Rashid

Scaricare il modello spa di Backbone.js

Il modello spa Backbone.js è progettato per iniziare rapidamente a creare app Web interattive sul lato client usando Backbone.js.

Il modello fornisce uno scheletro iniziale per lo sviluppo di un'applicazione Backbone.js in ASP.NET MVC. Per impostazione predefinita, offre funzionalità di accesso utente di base, tra cui l'iscrizione utente, l'accesso, la reimpostazione della password e la conferma dell'utente con modelli di posta elettronica di base.

Requisiti:

• aggiornamento di ASP.NET e strumenti Web 2012.2

Creare un progetto modello backbone

Scaricare e installare il modello facendo clic sul pulsante Scarica sopra. Il modello viene creato in un pacchetto come file di estensione di Visual Studio (VSIX). Potrebbe essere necessario riavviare Visual Studio.

Nel riquadro Modelli selezionare Modelli installati ed espandere il nodo Visual C# . In Visual C# selezionare Web. Nell'elenco dei modelli di progetto selezionare ASP.NET'applicazione Web MVC 4. Assegnare al progetto il nome e fare clic su OK.

Nella procedura guidata Nuovo progetto selezionare Backbone.js progetto SPA.

Premere Ctrl-F5 per compilare ed eseguire l'applicazione senza eseguire il debug oppure premere F5 per l'esecuzione con il debug.

Facendo clic su "Account personale" viene visualizzata la pagina di accesso:

Guida: Codice client

Iniziamo con il lato client. Gli script dell'applicazione client si trovano nella cartella ~/Scripts/application. L'applicazione viene scritta in TypeScript (file .ts) compilati in JavaScript ( file.js).

Applicazione

Application è definito in application.ts. Questo oggetto inizializza l'applicazione e funge da spazio dei nomi radice. Gestisce le informazioni di configurazione e stato condivise attraverso l'applicazione, ad esempio se l'utente è connesso.

Il application.start metodo crea le visualizzazioni modali e collega i gestori eventi per gli eventi a livello di applicazione, ad esempio l'accesso utente. Successivamente, crea il router predefinito e controlla se è specificato un URL lato client. In caso contrario, viene reindirizzato all'URL predefinito (#!/).

Events

Gli eventi sono sempre importanti quando si sviluppano componenti ad accoppiamento libero. Le applicazioni spesso eseguono più operazioni in risposta a un'azione dell'utente. Backbone fornisce eventi predefiniti con componenti come Model, Collection e View. Anziché creare interdipendenza tra questi componenti, il modello usa un modello "pub/sub": l'oggetto events , definito in events.ts, funge da hub eventi per la pubblicazione e la sottoscrizione agli eventi dell'applicazione. L'oggetto events è un singleton. Il codice seguente illustra come sottoscrivere un evento e quindi attivare l'evento:

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

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

Router

In Backbone.js, un router fornisce metodi per il routing delle pagine client-side e la connessione ad azioni ed eventi. Il modello definisce un singolo router, in router.ts. Il router crea le visualizzazioni attivabili e mantiene lo stato durante il cambio di visualizzazione. Le visualizzazioni attivabili sono descritte nella sezione successiva. Inizialmente, il progetto ha due visualizzazioni fittizie, Home e About. Ha anche una vista NotFound, che viene visualizzata se il percorso non è riconosciuto.

Visualizzazioni

Le viste sono definite in ~/Scripts/application/views. Esistono due tipi di visualizzazioni, visualizzazioni attivabili e finestre di dialogo modali. Le visualizzazioni attivabili vengono richiamate dal router. Quando viene visualizzata una visualizzazione attivabile, tutte le altre visualizzazioni attivabili diventano inattive. Per creare una visualizzazione attivabile, estendere la visualizzazione con l'oggetto Activable :

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

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

L'estensione con Activable aggiunge due nuovi metodi alla visualizzazione activate e deactivate. Il router chiama questi metodi per attivare e disattivare la visualizzazione.

Le visualizzazioni modali vengono implementate come dialoghi modali di Twitter Bootstrap . Le Membership visualizzazioni e Profile sono visualizzazioni modali. Le visualizzazioni modello possono essere richiamate da qualsiasi evento dell'applicazione. Nella visualizzazione Navigation, ad esempio, facendo clic sul collegamento "Il Mio Account" viene mostrata la vista Membership o la vista Profile, a seconda che l'utente abbia eseguito l'accesso. Collega Navigation i gestori di eventi click a qualunque elemento figlio che abbia l'attributo data-command. Ecco il markup HTML:

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

Ecco il codice in navigation.ts per associare gli eventi:

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'
    };
};

modelli

I modelli sono definiti in ~/Scripts/application/models. I modelli hanno tutti e tre elementi di base: attributi predefiniti, regole di convalida e un endpoint lato server. Ecco un esempio tipico:

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-in

La cartella ~/Scripts/application/lib contiene alcuni plug-in jQuery utili. Il file form.ts definisce un plug-in per l'uso dei dati del modulo. Spesso è necessario serializzare o deserializzare i dati del modulo e visualizzare eventuali errori di convalida del modello. Il plug-in form.ts include metodi come serializeFields, deserializeFieldse showFieldErrors. Nell'esempio seguente viene illustrato come serializzare un modulo in un modello.

// 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.'
        });
    }
});

Il plug-in flashbar.ts fornisce vari tipi di messaggi di feedback all'utente. I metodi sono $.showSuccessbare $.showErrorbar$.showInfobar. Dietro le quinte, usa gli avvisi di Twitter Bootstrap per mostrare messaggi ben animati.

Il plug-in confirm.ts sostituisce la finestra di dialogo di conferma del browser, anche se l'API è leggermente diversa:

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

Procedura dettagliata: Codice server

Ora esaminiamo il lato server.

Controllers

In un'applicazione a pagina singola, il server svolge solo un ruolo piccolo nell'interfaccia utente. In genere, il server esegue il rendering della pagina iniziale e quindi invia e riceve i dati JSON.

Il modello ha due controller MVC: HomeController esegue il rendering della pagina iniziale e SupportsController viene usato per confermare i nuovi account utente e reimpostare le password. Tutti gli altri controller nel modello sono ASP.NET controller API Web, che inviano e ricevono dati JSON. Per impostazione predefinita, i controller usano la nuova WebSecurity classe per eseguire attività correlate all'utente. Tuttavia, dispongono anche di costruttori opzionali che permettono di passare dei delegati per gestire queste attività. Questo semplifica il test e consente di sostituire WebSecurity con qualcos'altro usando un contenitore IoC. Ecco un esempio:

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

Le visualizzazioni sono progettate per essere modulari: ogni sezione di una pagina ha una propria visualizzazione dedicata. In un'applicazione a pagina singola, è comune includere visualizzazioni che non dispongono di un controller corrispondente. È possibile includere una visualizzazione chiamando @Html.Partial('myView'), ma questa operazione diventa noiosa. Per semplificare questa operazione, il modello definisce un metodo helper, IncludeClientViews, che esegue il rendering di tutte le visualizzazioni in una cartella specificata:

@Html.IncludeClientViews('yourViewFolder')

Se il nome della cartella non è specificato, il nome predefinito della cartella è "ClientViews". Se la visualizzazione client usa anche visualizzazioni parziali, denominare la visualizzazione parziale con un carattere di sottolineatura (ad esempio, _SignUp). Il IncludeClientViews metodo esclude tutte le visualizzazioni il cui nome inizia con un carattere di sottolineatura. Per includere una visualizzazione parziale nella visualizzazione client, chiamare Html.ClientView('SignUp') anziché Html.Partial('_SignUp').

Invio di messaggi di posta elettronica

Per inviare un messaggio di posta elettronica, il modello usa Postal. Tuttavia, Postal è astratta dal resto del codice con l'interfaccia IMailer , quindi è possibile sostituirlo facilmente con un'altra implementazione. I modelli di posta elettronica si trovano nella cartella Visualizzazioni/Messaggi di posta elettronica. L'indirizzo di posta elettronica del mittente viene specificato nel file web.config, nella sender.email chiave della sezione appSettings . Inoltre, quando debug="true" in web.config, l'applicazione non richiede la conferma tramite posta elettronica dell'utente, per velocizzare lo sviluppo.

GitHub

È anche possibile trovare il modello spa Backbone.js su GitHub.