Szablon Backbone
Autor : Mads Kristensen
Szablon spa szkieletowy został napisany przez Kazi Manzur Rashid
Szablon spa Backbone.js został zaprojektowany w celu szybkiego rozpoczęcia tworzenia interaktywnych aplikacji internetowych po stronie klienta przy użyciu Backbone.js.
Szablon zawiera początkowy szkielet do tworzenia aplikacji Backbone.js w ASP.NET MVC. Gotowe do użycia funkcje logowania użytkownika, w tym rejestracja użytkownika, logowanie, resetowanie hasła i potwierdzenie użytkownika przy użyciu podstawowych szablonów wiadomości e-mail.
Wymagania:
Tworzenie projektu szablonu szkieletowego
Pobierz i zainstaluj szablon, klikając przycisk Pobierz powyżej. Szablon jest spakowany jako plik rozszerzenia programu Visual Studio (VSIX). Może być konieczne ponowne uruchomienie programu Visual Studio.
W okienku Szablony wybierz pozycję Zainstalowane szablony i rozwiń węzeł Visual C# . W obszarze Visual C# wybierz pozycję Sieć Web. Na liście szablonów projektów wybierz pozycję ASP.NET aplikacja internetowa MVC 4. Nadaj projektowi nazwę i kliknij przycisk OK.
W kreatorze Nowy projekt wybierz pozycję Backbone.js PROJEKT SPA.
Naciśnij klawisze Ctrl-F5, aby skompilować i uruchomić aplikację bez debugowania, lub naciśnij klawisz F5, aby uruchomić polecenie z debugowaniem.
Kliknięcie pozycji "Moje konto" powoduje wyświetlenie strony logowania:
Przewodnik: kod klienta
Zacznijmy od strony klienta. Skrypty aplikacji klienckiej znajdują się w folderze ~/Scripts/application. Aplikacja jest zapisywana w językach TypeScript (pliki ts), które są kompilowane w języku JavaScript (pliki .js).
Aplikacja
Application parametr jest zdefiniowany w pliku application.ts. Ten obiekt inicjuje aplikację i działa jako główna przestrzeń nazw. Przechowuje informacje o konfiguracji i stanie udostępniane w aplikacji, takie jak to, czy użytkownik jest zalogowany.
Metoda application.start tworzy widoki modalne i dołącza programy obsługi zdarzeń dla zdarzeń na poziomie aplikacji, takich jak logowanie użytkownika. Następnie tworzy router domyślny i sprawdza, czy określono dowolny adres URL po stronie klienta. Jeśli nie, przekierowuje do domyślnego adresu URL (#!/).
Zdarzenia
Zdarzenia są zawsze ważne podczas tworzenia luźno powiązanych składników. Aplikacje często wykonują wiele operacji w odpowiedzi na akcję użytkownika. Sieć szkieletowa udostępnia wbudowane zdarzenia ze składnikami, takimi jak model, kolekcja i widok. Zamiast tworzyć zależności między tymi składnikami, szablon używa modelu "pub/sub": events obiekt zdefiniowany w pliku events.ts działa jako centrum zdarzeń do publikowania i subskrybowania zdarzeń aplikacji. Obiekt events jest pojedynczym obiektem. Poniższy kod pokazuje, jak subskrybować zdarzenie, a następnie wyzwalać zdarzenie:
events.on('myEvent', (e: MyEventArg) => {
// Do your work
});
// Later in the code
events.trigger('myEvent', { arg: 'myValue' });
Router
W Backbone.js router udostępnia metody routingu stron po stronie klienta i łączenia ich z akcjami i zdarzeniami. Szablon definiuje pojedynczy router w pliku router.ts. Router tworzy widoki z możliwością aktywowalnego działania i utrzymuje stan podczas przełączania widoków. (Widoki z możliwością aktywowalnego działania są opisane w następnej sekcji). Początkowo projekt ma dwa fikcyjne widoki: Home (Strona główna) i About (Informacje). Ma również widok NotFound, który jest wyświetlany, jeśli trasa nie jest znana.
Widoki
Widoki są definiowane w widokach ~/Scripts/application/views. Istnieją dwa rodzaje widoków, widoki z możliwością aktywowania i modalne widoki okien dialogowych. Widoki z możliwością aktywowalnego działania są wywoływane przez router. Po wyświetleniu widoku z możliwością aktywowalnego wszystkie inne aktywne widoki stają się nieaktywne. Aby utworzyć widok z możliwością aktywowania, rozszerz widok za Activable pomocą obiektu :
export class MyView extends Backbone.View {
// Other implementation details
}
// Extending with Activable
_.extend(MyView.prototype, Activable);
Rozszerzanie za pomocą polecenia Activable dodaje dwie nowe metody do widoku i deactivateactivate . Router wywołuje te metody w celu aktywowania i dezaktywowania widoku.
Modalne widoki są implementowane jako modalne okna dialogowe Twitter Bootstrap . Widoki Membership i Profile są widokami modalnymi. Widoki modelu mogą być wywoływane przez dowolne zdarzenia aplikacji. Na przykład w Navigation widoku kliknięcie linku "Moje konto" spowoduje wyświetlenie Membership widoku lub Profile widoku w zależności od tego, czy użytkownik jest zalogowany. Dołączanie Navigation klika programy obsługi zdarzeń do wszystkich elementów podrzędnych, które mają data-command atrybut . Oto znacznik HTML:
<li>
<a href="#" data-command="myAccount">
<i class="icon-user"></i> My Account
</a>
</li>
Oto kod w pliku navigation.ts, aby podłączyć zdarzenia:
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'
};
};
Modele
Modele są definiowane w plikach ~/Scripts/application/models. Wszystkie modele mają trzy podstawowe elementy: atrybuty domyślne, reguły walidacji i punkt końcowy po stronie serwera. Oto typowy przykład:
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 };
}
}
}
Wtyczki
Folder ~/Scripts/application/lib zawiera kilka przydatnych wtyczek jQuery. Plik form.ts definiuje wtyczkę do pracy z danymi formularza. Często należy serializować lub deserializować dane formularza i wyświetlać wszelkie błędy weryfikacji modelu. Wtyczka form.ts ma metody, takie jak serializeFields, deserializeFieldsi showFieldErrors. W poniższym przykładzie pokazano, jak serializować formularz do modelu.
// 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.'
});
}
});
Wtyczka flashbar.ts udostępnia użytkownikowi różne rodzaje komunikatów zwrotnych. Metody to $.showSuccessbar, $.showErrorbar i $.showInfobar. W tle używa alertów twitter bootstrap do wyświetlania ładnie animowanych wiadomości.
Wtyczka confirm.ts zastępuje okno dialogowe potwierdzania przeglądarki, chociaż interfejs API jest nieco inny:
$.confirm({
prompt: 'Are you sure you want to do it?',
ok: => { //Do something useful },
cancel: => { // Do something else }
)};
Przewodnik: kod serwera
Teraz przyjrzyjmy się stronie serwera.
Kontrolery
W aplikacji jednostronicowej serwer odgrywa tylko niewielką rolę w interfejsie użytkownika. Zazwyczaj serwer renderuje stronę początkową, a następnie wysyła i odbiera dane JSON.
Szablon ma dwa kontrolery MVC: HomeController renderuje stronę początkową i SupportsController służy do potwierdzania nowych kont użytkowników i resetowania haseł. Wszystkie inne kontrolery w szablonie są ASP.NET kontrolery interfejsu API sieci Web, które wysyłają i odbierają dane JSON. Domyślnie kontrolery używają nowej WebSecurity klasy do wykonywania zadań związanych z użytkownikiem. Jednak mają również opcjonalne konstruktory, które umożliwiają przekazywanie delegatów dla tych zadań. Ułatwia to testowanie i umożliwia zamianę WebSecurity na coś innego przy użyciu kontenera IoC. Oto przykład:
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
}
Widoki
Widoki mają być modułowe: każda sekcja strony ma własny dedykowany widok. W aplikacji jednostronicowej często są uwzględniane widoki, które nie mają odpowiedniego kontrolera. Widok można uwzględnić, wywołując @Html.Partial('myView')metodę , ale jest to żmudne. Aby to ułatwić, szablon definiuje metodę pomocnika , IncludeClientViewsktóra renderuje wszystkie widoki w określonym folderze:
@Html.IncludeClientViews('yourViewFolder')
Jeśli nazwa folderu nie zostanie określona, domyślna nazwa folderu to "ClientViews". Jeśli widok klienta używa również widoków częściowych, nazwij widok częściowy znakiem podkreślenia (na przykład _SignUp). Metoda IncludeClientViews wyklucza wszystkie widoki, których nazwa zaczyna się od podkreślenia. Aby uwzględnić widok częściowy w widoku klienta, wywołaj metodę Html.ClientView('SignUp') zamiast Html.Partial('_SignUp').
Wysyłanie Email
Aby wysłać wiadomość e-mail, szablon używa funkcji Postal. Jednak postal jest abstrahowany od pozostałej części kodu za pomocą interfejsu IMailer , więc można go łatwo zastąpić inną implementacją. Szablony wiadomości e-mail znajdują się w folderze Widoki/Wiadomości e-mail. Adres e-mail nadawcy jest określony w pliku web.config w sender.email kluczu sekcji appSettings . Ponadto w przypadku debug="true" web.config aplikacja nie wymaga potwierdzenia wiadomości e-mail użytkownika, aby przyspieszyć programowanie.
GitHub
Szablon Backbone.js SPA można również znaleźć w witrynie GitHub.