Modello Backbone
Il modello SPA Backbone è stato scritto da Kazi Manzur Rashid
Il modello Backbone.js SPA è progettato per iniziare rapidamente a creare app Web sul lato client interattive usando Backbone.js.
Il modello fornisce uno scheletro iniziale per lo sviluppo di un'applicazione Backbone.js in ASP.NET MVC. Out-of-box offre funzionalità di accesso utente di base, tra cui l'iscrizione utente, la reimpostazione della password e la conferma dell'utente con modelli di posta elettronica di base.
Requisiti:
Creare un progetto modello backbone
Scaricare e installare il modello facendo clic sul pulsante Scarica sopra. Il modello viene pacchetto come file VSIX (Visual Studio Extension). 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 un nome al progetto 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 o premere F5 per l'esecuzione con il debug.
Facendo clic su "Account personale" viene visualizzata la pagina di accesso:
Procedura dettagliata: Codice client
Iniziamo con il lato client. Gli script dell'applicazione client si trovano nella cartella ~/Script/applicazione. L'applicazione viene scritta in TypeScript (file con estensione ts) compilati in JavaScript (.js file).
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 nell'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 verifica se è specificato qualsiasi URL lato client. In caso contrario, reindirizza all'URL predefinito (#!/).
Eventi
Gli eventi sono sempre importanti quando si sviluppano componenti con accoppiamento libero. Le applicazioni spesso eseguono più operazioni in risposta a un'azione utente. Il backbone fornisce eventi predefiniti con componenti come Model, Collection e View. Anziché creare dipendenze 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 lato client e la connessione a azioni ed eventi. Il modello definisce un singolo router, in router.ts. Il router crea le visualizzazioni attivabili e mantiene lo stato durante la modifica delle visualizzazioni. Le visualizzazioni attivabili sono descritte nella sezione successiva. Inizialmente, il progetto ha due viste fittizie, Home e About. Ha anche una visualizzazione NotFound, che viene visualizzata se la route non è nota.
Visualizzazioni
Le viste sono definite in ~/Script/application/views. Esistono due tipi di visualizzazioni, viste attivabili e viste di dialogo modali. Le viste 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 viste modali. Le visualizzazioni del modello possono essere richiamate da qualsiasi evento dell'applicazione. Ad esempio, nella Navigation visualizzazione fare clic sul collegamento "Account personale" visualizza la visualizzazione o la MembershipProfile visualizzazione, a seconda che l'utente sia connesso. I Navigation gestori eventi di collegamento fanno clic su tutti gli elementi figlio con 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 collegare 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 ~/Script/application/models. I modelli dispongono di tre elementi di base: attributi predefiniti, regole di convalida e punto finale 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 ~/Script/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 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 include due controller MVC: HomeController esegue il rendering della pagina iniziale e viene usato per confermare nuovi account utente e SupportsController reimpostare le password. Tutti gli altri controller nel modello sono API Web ASP.NET controller, che inviano e ricevono dati JSON. Per impostazione predefinita, i controller usano la nuova WebSecurity classe per eseguire attività correlate all'utente. Tuttavia, hanno anche costruttori facoltativi che consentono di passare delegati per queste attività. Ciò semplifica il test e consente di sostituire WebSecurity con un altro elemento usando un contenitore IoC. 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
}
Visualizzazioni
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 hanno alcun controller corrispondente. È possibile includere una visualizzazione chiamando @Html.Partial('myView'), ma questo diventa noioso. Per semplificare questa operazione, il modello definisce un metodo helper, , IncludeClientViewsche esegue il rendering di tutte le visualizzazioni in una cartella specificata:
@Html.IncludeClientViews('yourViewFolder')
Se il nome della cartella non è specificato, il nome della cartella predefinito è "ClientViews". Se la visualizzazione client usa anche visualizzazioni parziali, assegnare un nome alla 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') invece di Html.Partial('_SignUp').
Invio di Email
Per inviare messaggi di posta elettronica, il modello usa Postal. Tuttavia, Postal viene astratta dal resto del codice con l'interfaccia IMailer , in modo da poterlo sostituire 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 dell'indirizzo di posta elettronica dell'utente, per velocizzare lo sviluppo.
GitHub
È anche possibile trovare il modello Backbone.js SPA in GitHub.