Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Mads Kristensen
Die Backbone SPA Vorlage wurde von Kazi Manzur Rashid geschrieben
Die Backbone.js SPA-Vorlage ist so konzipiert, dass Sie schnell mit der Erstellung interaktiver clientseitiger Web-Apps mit Backbone.jsbeginnen können.
Die Vorlage stellt ein erstes Skelett für die Entwicklung einer Backbone.js-Anwendung in ASP.NET MVC bereit. Standardmäßig bietet es grundlegende Benutzeranmeldefunktionen, einschließlich Benutzeranmeldung, Anmeldung, Kennwortzurücksetzung und Benutzerbestätigung mit grundlegenden E-Mail-Vorlagen.
Anforderungen:
Erstellen eines Backbone-Vorlagenprojekts
Laden Sie die Vorlage herunter, und installieren Sie sie, indem Sie oben auf die Schaltfläche "Herunterladen" klicken. Die Vorlage wird als VSIX-Datei (Visual Studio Extension) verpackt. Möglicherweise müssen Sie Visual Studio neu starten.
Wählen Sie im Bereich "Vorlagen " die Option "Installierte Vorlagen " aus, und erweitern Sie den Knoten "Visual C# ". Wählen Sie unter Visual C#"Web" aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt, und klicken Sie auf 'OK'.
Wählen Sie im Assistenten " Neues Projekt" Backbone.js SPA-Projekt aus.
Drücken Sie Ctrl-F5, um die Anwendung ohne Debugging zu erstellen und auszuführen, oder drücken Sie F5, um mit dem Debuggen auszuführen.
Durch Klicken auf "Mein Konto" wird die Anmeldeseite angezeigt:
Anleitung: Client-Code
Beginnen wir mit der Clientseite. Die Clientanwendungsskripts befinden sich im Ordner "~/Scripts/Application". Die Anwendung wird in TypeScript (.ts Dateien) geschrieben, die in JavaScript (.js Dateien) kompiliert werden.
Application
Application wird in application.ts definiert. Dieses Objekt initialisiert die Anwendung und fungiert als Stammnamespace. Es verwaltet Konfigurations- und Statusinformationen, die für die gesamte Anwendung freigegeben werden, z. B. ob der Benutzer angemeldet ist.
Die application.start Methode erstellt die modalen Ansichten und fügt Ereignishandler für Ereignisse auf Anwendungsebene an, z. B. die Benutzeranmeldung. Als Nächstes erstellt er den Standardrouter und überprüft, ob eine clientseitige URL angegeben ist. Wenn nicht, wird sie an die Standard-URL (#!/) umgeleitet.
Ereignisse
Ereignisse sind bei der Entwicklung lose gekoppelter Komponenten immer wichtig. Anwendungen führen häufig mehrere Vorgänge als Reaktion auf eine Benutzeraktion aus. Backbone bietet integrierte Ereignisse mit Komponenten wie Model, Collection und View. Anstatt Zwischenabhängigkeiten zwischen diesen Komponenten zu erstellen, verwendet die Vorlage ein "pub/sub"-Modell: Das events in events.ts definierte Objekt dient als Event Hub zum Veröffentlichen und Abonnieren von Anwendungsereignissen. Das events Objekt ist ein Singleton. Der folgende Code zeigt, wie Sie ein Ereignis abonnieren und dann das Ereignis auslösen:
events.on('myEvent', (e: MyEventArg) => {
// Do your work
});
// Later in the code
events.trigger('myEvent', { arg: 'myValue' });
Router
In Backbone.jsstellt ein Router Methoden zum Routing clientseitiger Seiten und zum Verbinden mit Aktionen und Ereignissen bereit. Die Vorlage definiert einen einzelnen Router in router.ts. Der Router erstellt die aktivierten Ansichten und verwaltet den Zustand beim Wechseln von Ansichten. (Aktivierbare Ansichten werden im nächsten Abschnitt beschrieben.) Zunächst verfügt das Projekt über zwei Dummy-Ansichten, "Startseite" und "Info". Es verfügt auch über eine NotFound-Ansicht, die angezeigt wird, wenn die Route nicht bekannt ist.
Views
Die Ansichten werden in ~/Scripts/application/views definiert. Es gibt zwei Arten von Ansichten, aktivierten Ansichten und modalen Dialogfelderansichten. Aktivierbare Ansichten werden vom Router aufgerufen. Wenn eine aktivierte Ansicht angezeigt wird, werden alle anderen aktivierten Ansichten inaktiv. Erweitern Sie die Ansicht mit dem Activable Objekt, um eine aktivierte Ansicht zu erstellen:
export class MyView extends Backbone.View {
// Other implementation details
}
// Extending with Activable
_.extend(MyView.prototype, Activable);
Erweiterung mit Activable fügt der Ansicht zwei neue Methoden activate und deactivate hinzu. Der Router ruft diese Methoden auf, um die Ansicht zu aktivieren und zu deaktivieren.
Modale Ansichten werden als modale Dialoge von Twitter Bootstrap implementiert. Die Membership und Profile Ansichten sind modale Ansichten. Modellansichten können von allen Anwendungsereignissen aufgerufen werden. Wenn Sie beispielsweise in der Navigation Ansicht auf den Link "Mein Konto" klicken, wird entweder die Membership Ansicht oder die Profile Ansicht angezeigt, je nachdem, ob der Benutzer angemeldet ist.
Navigation fügt Klick-Ereignishandler zu allen untergeordneten Elementen hinzu, die das data-command-Attribut aufweisen. Hier sehen Sie das HTML-Markup:
<li>
<a href="#" data-command="myAccount">
<i class="icon-user"></i> My Account
</a>
</li>
Hier ist der Code in navigation.ts, um die Ereignisse zu verknüpfen:
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'
};
};
Modelle
Die Modelle werden in ~/Scripts/application/models definiert. Die Modelle verfügen alle über drei grundlegende Dinge: Standardattribute, Überprüfungsregeln und ein serverseitiger Endpunkt. Hier ist ein typisches Beispiel:
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
Der Ordner ~/Scripts/application/lib enthält einige praktische jQuery-Plug-Ins. Die form.ts Datei definiert ein Plug-In zum Arbeiten mit Formulardaten. Häufig müssen Sie Formulardaten serialisieren oder deserialisieren und Modellüberprüfungsfehler anzeigen. Das form.ts-Plug-In verfügt über Methoden wie serializeFields, deserializeFields, und showFieldErrors. Das folgende Beispiel zeigt, wie sie ein Formular in ein Modell serialisieren.
// 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.'
});
}
});
Das flashbar.ts Plug-In gibt dem Benutzer verschiedene Arten von Feedbacknachrichten. Die Methoden sind $.showSuccessbar, $.showErrorbar und $.showInfobar. Hinter den Kulissen verwendet es Twitter Bootstrap-Benachrichtigungen, um ansprechende animierte Nachrichten anzuzeigen.
Das confirm.ts Plug-In ersetzt das Bestätigungsdialogfeld des Browsers, obwohl die API etwas anders ist:
$.confirm({
prompt: 'Are you sure you want to do it?',
ok: => { //Do something useful },
cancel: => { // Do something else }
)};
Anleitung: Servercode
Sehen wir uns nun die Serverseite an.
Controllers
In einer Einzelseitenanwendung spielt der Server nur eine kleine Rolle in der Benutzeroberfläche. In der Regel rendert der Server die erste Seite und sendet und empfängt dann JSON-Daten.
Die Vorlage verfügt über zwei MVC-Controller: HomeController rendert die erste Seite und SupportsController wird verwendet, um neue Benutzerkonten zu bestätigen und Kennwörter zurückzusetzen. Alle anderen Controller in der Vorlage sind ASP.NET Web-API-Controller, die JSON-Daten senden und empfangen. Standardmäßig verwenden die Controller die neue WebSecurity Klasse, um benutzerbezogene Aufgaben auszuführen. Sie verfügen jedoch auch über optionale Konstruktoren, mit denen Sie Stellvertretungen für diese Aufgaben übergeben können. Dies erleichtert das Testen und ermöglicht es Ihnen, durch einen IoC-Container durch etwas anderes zu ersetzen WebSecurity . Hier ist ein Beispiel:
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
}
Ansichten
Die Ansichten sind modular gestaltet: Jeder Abschnitt einer Seite verfügt über eine eigene dedizierte Ansicht. In einer einzelseitigen Anwendung ist es üblich, Ansichten einzuschließen, die keinen entsprechenden Controller besitzen. Sie können eine Ansicht durch Aufrufen @Html.Partial('myView')einschließen, aber dies wird mühsam. Um dies zu vereinfachen, definiert die Vorlage eine Hilfsmethode, IncludeClientViewsdie alle Ansichten in einem angegebenen Ordner rendert:
@Html.IncludeClientViews('yourViewFolder')
Wenn der Ordnername nicht angegeben ist, lautet der Standardordnername "ClientViews". Wenn Ihre Clientansicht auch Teilansichten verwendet, benennen Sie die Teilansicht mit einem Unterstrichzeichen (z. B. _SignUp). Die IncludeClientViews Methode schließt alle Ansichten aus, deren Name mit einem Unterstrich beginnt. Um eine Teilansicht in die Clientansicht einzuschließen, rufen Sie Html.ClientView('SignUp') anstelle von Html.Partial('_SignUp').
Senden von E-Mails
Zum Senden von E-Mails verwendet die Vorlage "Post". Post wird jedoch vom Rest des Codes mit der IMailer Schnittstelle abstrahiert, sodass Sie ihn problemlos durch eine andere Implementierung ersetzen können. Die E-Mail-Vorlagen befinden sich im Ordner "Ansichten/E-Mails". Die E-Mail-Adresse des Absenders wird in der datei web.config im sender.email Schlüssel des Abschnitts "appSettings " angegeben. In debug="true" web.config erfordert die Anwendung außerdem keine Benutzer-E-Mail-Bestätigung, um die Entwicklung zu beschleunigen.
GitHub
Sie finden auch die Backbone.js SPA-Vorlage auf GitHub.