Szablon szkieletowy

Autor : Mads Kristensen

Szkieletowy szablon SPA został napisany przez Kazi Manzur Rashid

Pobieranie szablonu Backbone.js SPA

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 na platformie ASP.NET MVC. Od razu dostępne są podstawowe funkcje logowania, w tym rejestracja, logowanie, resetowanie hasła i potwierdzenie użytkownika z wykorzystaniem podstawowych szablonów e-mail.

Wymagania:

• aktualizacja narzędzi ASP.NET i Web Tools 2012.2

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 Backbone.js projekt SPA.

Naciśnij 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ęzyku TypeScript (pliki .ts), które są kompilowane w języku JavaScript (pliki.js).

Application

Application jest zdefiniowany w 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, nastąpi przekierowanie do domyślnego adresu URL (#!/).

Wydarzenia

Zdarzenia są zawsze ważne podczas opracowywania luźno powiązanych składników. Aplikacje często wykonują wiele operacji w odpowiedzi na akcję użytkownika. Backbone udostępnia wbudowane zdarzenia z komponentami, 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 events.ts działa jako centrum zdarzeń do publikowania i subskrybowania zdarzeń aplikacji. Obiekt events jest pojedynczym obiektem. Poniższy kod pokazuje, jak zasubskrybować zdarzenie, a następnie wyzwolić zdarzenie:

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

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

Router

W Backbone.jsrouter udostępnia metody routingu stron po stronie klienta i łączenia ich z akcjami i zdarzeniami. Szablon definiuje jeden router w router.ts. Router tworzy aktywowane widoki i utrzymuje stan podczas przełączania widoków. (Widoki, które można aktywować, są opisane w następnej sekcji.) Na początku projekt zawiera dwa fikcyjne widoki, Strona główna i Informacje. Ma również widok NotFound, który jest wyświetlany, jeśli trasa nie jest znana.

Widoki

Definicje widoków znajdują się w ~/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, który można aktywować, wszystkie inne widoki, które mogą być aktywowane, stają się nieaktywne. Aby utworzyć widok z możliwością aktywowania, rozszerz za pomocą obiektu Activable widok:

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

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

Rozszerzenie za pomocą Activable dodaje dwie nowe metody do widoku: activate oraz deactivate. 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 to modalne widoki. 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łącza Navigation programy obsługi zdarzeń kliknięcia do wszystkich elementów podrzędnych, które mają atrybut data-command. Oto znaczniki HTML:

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

Oto kod w navigation.ts, aby powiązać 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 trzeba serializować lub deserializować dane formularza i wyświetlać wszelkie błędy walidacji 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 wiadomości zwrotnych. Metody to są $.showSuccessbar, $.showErrorbar i $.showInfobar. Za kulisami 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.

Controllers

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 to kontrolery interfejsu API sieci Web ASP.NET, 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że mają one również opcjonalne konstruktory, które umożliwiają przekazywanie delegatów do 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 są zaprojektowane tak, aby był modułowy: każda sekcja strony ma własny dedykowany widok. W aplikacji jednostronicowej często są uwzględniane widoki, które nie mają żadnego odpowiedniego kontrolera. Widok można uwzględnić, wywołując metodę @Html.Partial('myView'), ale jest to uciążliwe. 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 dowolne widoki, których nazwa zaczyna się od znaku podkreślenia. Aby uwzględnić widok częściowy w widoku klienta, wywołaj metodę Html.ClientView('SignUp') zamiast Html.Partial('_SignUp').

Wysyłanie wiadomości e-mail

Aby wysłać wiadomość e-mail, szablon używa adresu Postal. Jednak Postal jest abstrahowany od reszty kodu za pomocą interfejsu IMailer, więc można łatwo zastąpić go 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.configaplikacja 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.