Šablona Backbone

Mads Kristensen

Šablonu páteřní spa napsal Kazi Manzur Rashid.

Stažení šablony Backbone.js SPA

Šablona Backbone.js SPA je navržená tak, abyste mohli rychle začít vytvářet interaktivní webové aplikace na straně klienta pomocí Backbone.js.

Šablona poskytuje počáteční kostru pro vývoj aplikace Backbone.js v ASP.NET MVC. Nabízí základní funkce přihlášení uživatelů, včetně registrace uživatele, přihlášení, resetování hesla a potvrzení uživatele pomocí základních e-mailových šablon.

Požadavky:

• aktualizace ASP.NET and Web Tools 2012.2

Vytvoření projektu páteřní šablony

Stáhněte a nainstalujte šablonu kliknutím na tlačítko Stáhnout výše. Šablona je zabalená jako soubor rozšíření sady Visual Studio (VSIX). Možná budete muset restartovat Visual Studio.

V podokně Šablony vyberte Nainstalované šablony a rozbalte uzel Visual C# . V části Visual C# vyberte Web. V seznamu šablon projektů vyberte ASP.NET webová aplikace MVC 4. Pojmenujte projekt a klikněte na OK.

V průvodci New Project (Nový projekt ) vyberte Backbone.js SPA Project (Projekt SPA).

Stisknutím kláves Ctrl-F5 sestavte a spusťte aplikaci bez ladění, nebo stisknutím klávesy F5 spusťte ladění.

Kliknutím na Můj účet zobrazíte přihlašovací stránku:

Návod: Kód klienta

Začněme na straně klienta. Skripty klientské aplikace se nacházejí ve složce ~/Scripts/application. Aplikace je napsaná v TypeScriptu (soubory .ts), které se kompilují do JavaScriptu (.js soubory).

Aplikace

Application je definován v souboru application.ts. Tento objekt inicializuje aplikaci a funguje jako kořenový obor názvů. Udržuje informace o konfiguraci a stavu, které jsou sdíleny v rámci aplikace, například jestli je uživatel přihlášený.

Metoda application.start vytvoří modální zobrazení a připojí obslužné rutiny událostí pro události na úrovni aplikace, jako je přihlášení uživatele. Dále vytvoří výchozí směrovač a zkontroluje, jestli je zadána adresa URL na straně klienta. Pokud ne, přesměruje se na výchozí adresu URL (#!/).

Události

Události jsou vždy důležité při vývoji volně propojených komponent. Aplikace často provádějí více operací v reakci na akci uživatele. Páteřní síť poskytuje integrované události s komponentami, jako jsou Model, Kolekce a Zobrazení. Místo vytváření závislostí mezi těmito komponentami šablona používá model pub/sub: Objekt events definovaný v souboru events.ts funguje jako centrum událostí pro publikování a přihlášení k odběru událostí aplikace. Objekt events je jednoúčelový. Následující kód ukazuje, jak se přihlásit k odběru události a pak ji aktivovat:

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

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

Směrovač

V Backbone.js směrovač poskytuje metody pro směrování stránek na straně klienta a jejich připojení k akcím a událostem. Šablona definuje jeden směrovač v souboru router.ts. Směrovač vytváří aktivovatelná zobrazení a udržuje stav při přepínání zobrazení. (Aktivovatelná zobrazení jsou popsaná v další části.) Zpočátku má projekt dvě fiktivní zobrazení: Domů a O aplikaci. Má také zobrazení Nenalezeno, které se zobrazí, pokud trasa není známa.

Zobrazení

Zobrazení jsou definována v ~/Scripts/application/views. Existují dva druhy zobrazení: aktivovatelná zobrazení a modální dialogová zobrazení. Aktivovatelná zobrazení jsou vyvolána směrovačem. Když se zobrazí aktivovatelné zobrazení, všechna ostatní aktivovatelná zobrazení se stanou neaktivními. Pokud chcete vytvořit aktivovatelné zobrazení, rozšiřte zobrazení o Activable objekt :

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

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

Rozšíření o Activable přidá do zobrazení dvě nové metody, activate a deactivate. Směrovač volá tyto metody k aktivaci a deaktivaci zobrazení.

Modální zobrazení se implementují jako modální dialogy Twitter Bootstrap . Zobrazení Membership a Profile jsou modální zobrazení. Zobrazení modelu mohou být vyvolána událostmi aplikace. Například kliknutím na odkaz "Můj účet" v Navigation zobrazení se zobrazí zobrazení Membership nebo Profile zobrazení podle toho, jestli je uživatel přihlášený. Připojí Navigation obslužné rutiny událostí kliknutí ke všem podřízeným prvkům, které mají data-command atribut . Tady je kód HTML:

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

Tady je kód v souboru navigation.ts pro připojení událostí:

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

Modely

Modely jsou definovány v ~/Scripts/application/models. Všechny modely mají tři základní věci: výchozí atributy, ověřovací pravidla a koncový bod na straně serveru. Tady je typický příklad:

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

Moduly plug-in

Složka ~/Scripts/application/lib obsahuje několik užitečných modulů plug-in jQuery. Soubor form.ts definuje modul plug-in pro práci s daty formuláře. Často potřebujete serializovat nebo deserializovat data formuláře a zobrazit všechny chyby ověření modelu. Modul plug-in form.ts obsahuje metody, jako serializeFieldsjsou , deserializeFieldsa showFieldErrors. Následující příklad ukazuje, jak serializovat formulář 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.'
        });
    }
});

Modul plug-in flashbar.ts poskytuje uživatelům různé druhy zpráv zpětné vazby. Metody jsou $.showSuccessbar, $.showErrorbar a $.showInfobar. Na pozadí používá upozornění Twitter Bootstrap k zobrazení hezky animovaných zpráv.

Modul plug-in confirm.ts nahrazuje dialogové okno potvrzení prohlížeče, i když rozhraní API je poněkud odlišné:

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

Návod: Serverový kód

Teď se podíváme na stranu serveru.

Kontrolery

V jednostránkové aplikaci hraje server v uživatelském rozhraní jen malou roli. Server obvykle vykreslí počáteční stránku a pak odešle a přijme data JSON.

Šablona má dva kontrolery MVC: HomeController vykreslí počáteční stránku a SupportsController slouží k potvrzení nových uživatelských účtů a resetování hesel. Všechny ostatní kontrolery v šabloně jsou ASP.NET kontrolery webového rozhraní API, které odesílají a přijímají data JSON. Kontrolery ve výchozím nastavení používají novou WebSecurity třídu k provádění úloh souvisejících s uživatelem. Mají však také volitelné konstruktory, které umožňují předávat delegáty pro tyto úlohy. To usnadňuje testování a umožňuje nahradit WebSecurity něčím jiným pomocí kontejneru IoC. Zde naleznete příklad:

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
}

Zobrazení

Zobrazení jsou navržená tak, aby byla modulární: Každá část stránky má vlastní vyhrazené zobrazení. V jednostránkové aplikaci je běžné zahrnout zobrazení, která nemají odpovídající kontroler. Zobrazení můžete zahrnout voláním @Html.Partial('myView'), ale bude to zdlouhavé. Aby to bylo jednodušší, šablona definuje pomocnou metodu IncludeClientViews, která vykreslí všechna zobrazení v zadané složce:

@Html.IncludeClientViews('yourViewFolder')

Pokud název složky není zadaný, výchozí název složky je ClientViews. Pokud klientské zobrazení používá také částečná zobrazení, pojmenujte částečné zobrazení podtržítkem (například _SignUp). Metoda IncludeClientViews vyloučí všechna zobrazení, jejichž název začíná podtržítkem. Pokud chcete do klientského zobrazení zahrnout částečné zobrazení, volejte Html.ClientView('SignUp') místo metody Html.Partial('_SignUp').

Odesílání Email

K odesílání e-mailů šablona používá poštovní poštu. Postal je však abstrahován od zbytku kódu s rozhraním IMailer , takže ho můžete snadno nahradit jinou implementací. E-mailové šablony jsou umístěné ve složce Zobrazení/e-maily. E-mailová adresa odesílatele je uvedená v souboru web.config v sender.email klíči oddílu appSettings . debug="true" V web.config navíc aplikace nevyžaduje potvrzení e-mailu uživatele, aby urychlila vývoj.

GitHubu

Šablonu Backbone.js SPA najdete také na GitHubu.