Šablona EmberJS

Xinyang Qiu

Šablonu EmberJS MVC napsali Nathan Totten, Thiago Santos a Xinyang Qiu.

Stažení šablony EmberJS MVC

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

"Jednostránková aplikace" (SPA) je obecný termín pro webovou aplikaci, která načte jednu stránku HTML a pak stránku dynamicky aktualizuje, místo aby načítala nové stránky. Po počátečním načtení stránky bude SPA komunikovat se serverem prostřednictvím požadavků AJAX.

AJAX není nic nového, ale dnes existují javascriptové architektury, které usnadňují sestavení a údržbu velkých sofistikovaných aplikací SPA. Html 5 a CSS3 také usnadňují vytváření bohatých uživatelských rozhraní.

Šablona EmberJS SPA používá knihovnu Ember JavaScript ke zpracování aktualizací stránek z požadavků AJAX. Ember.js používá datovou vazbu k synchronizaci stránky s nejnovějšími daty. Díky tomu nemusíte psát žádný kód, který vás provede daty JSON a aktualizuje dom. Místo toho vložíte do kódu HTML deklarativní atributy, které Ember.js způsob prezentace dat.

Na straně serveru je šablona EmberJS téměř stejná jako šablona KnockoutJS SPA. Používá ASP.NET MVC k poskytování dokumentů HTML a ASP.NET webové rozhraní API pro zpracování požadavků AJAX z klienta. Další informace o těchto aspektech šablony najdete v dokumentaci k šablonám KnockoutJS . Toto téma se zaměřuje na rozdíly mezi šablonou Knockout a šablonou EmberJS.

Vytvoření projektu šablony EmberJS SPA

Stáhněte a nainstalujte šablonu kliknutím na tlačítko Stáhnout výše. 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 Ember.js SPA Project (Projekt SPA).

Přehled šablon EmberJS SPA

Šablona EmberJS používá kombinaci jQuery, Ember.js Handlebars.js k vytvoření plynulého interaktivního uživatelského rozhraní.

Ember.js je javascriptová knihovna, která používá vzor MVC na straně klienta.

• Šablona napsaná v šablonovacím jazyce pro úchyty popisuje uživatelské rozhraní aplikace. V režimu vydané verze se kompilátor handlebars používá ke sbalování a kompilaci šablony úchytů.
• Model ukládá data aplikace, která získá ze serveru (seznamy ToDo a položky ToDo).
• Kontroler ukládá stav aplikace. Kontrolery často prezentují modelová data do odpovídajících šablon.
• Zobrazení překládá primitivní události z aplikace a předává je kontroleru.
• Směrovač spravuje stav aplikace a udržuje synchronizované adresy URL a šablony.

Kromě toho je možné použít knihovnu Ember Data k synchronizaci objektů JSON (získaných ze serveru prostřednictvím rozhraní RESTful API) a klientských modelů.

Šablona EmberJS SPA uspořádá skripty do osmi vrstev:

• webapi_adapter.js, webapi_serializer.js: Rozšiřuje knihovnu dat Ember pro práci s webovým rozhraním API ASP.NET.
• Skripty/helpers.js: Definuje nové pomocné rutiny pro oranžová řídítka.
• Skripty/app.js: Vytvoří aplikaci a nakonfiguruje adaptér a serializátor.
• Skripty/aplikace/modely/*.js: Definuje modely.
• Scripts/app/views/*.js: Definuje zobrazení.
• Scripts/app/controllers/*.js: Definuje kontrolery.
• Scripts/app/routes, Scripts/app/router.js: Definuje trasy.
• Templates/*.hbs: Definuje šablony řídítek.

Pojďme se na některé z těchto skriptů podívat podrobněji.

Modely

Modely jsou definované ve složce Scripts/app/models. Existují dva soubory modelu: todoItem.js a todoList.js.

todo.model.js definuje modely na straně klienta (prohlížeče) pro seznamy úkolů. Existují dvě třídy modelu: todoItem a todoList. V Ember jsou modely podtřídy DS. Model. Model může mít vlastnosti s atributy:

todoItemId: attr('number'), 
title: attr('string')

Modely můžou definovat relace s jinými modely:

todoList: DS.belongsTo('App.TodoList'),

Modely můžou mít vypočítané vlastnosti, které se váže na jiné vlastnosti:

hasError: function () {
    var currentError = this.get("error");
    return !(currentError === '' || currentError === null);
}.property('error'),

Modely můžou mít funkce pozorovatele, které se vyvolávají při změně pozorované vlastnosti:

saveCheckbox: function () {
    if(this.get("isDirty")){
        if (this.get("todoItemId")) {
            App.store.commit();
        }
    }
}.observes('isDone'),

Zobrazení

Zobrazení jsou definována ve složce Scripts/app/views. Zobrazení překládá události z uživatelského rozhraní aplikace. Obslužná rutina události může volat zpět funkce kontroleru nebo jednoduše přímo volat kontext dat.

Například následující kód je ze zobrazení/TodoItemEditView.js. Definuje zpracování událostí pro vstupní textové pole.

App.TodoItemEditView = Em.TextField.extend({
    lastValue: '',
    focusIn: function (evt) {
        this.lastValue = this.get('parentView').templateData.view.content.get("title");
    },
    focusOut: function (evt) {
        this.changeContent();
    },

    insertNewline: function (evt) {
        $(evt.target).blur();
    },

    changeContent: function () {
        var todoItem = this.get('parentView').templateData.view.content;
        var newValue = todoItem.get("title");
        if (this.lastValue != newValue) {
            App.store.commit();
            this.lastValue = newValue;
        }
    }
});

Controller

Kontrolery jsou definované ve složce Scripts/app/controllers. Pokud chcete reprezentovat jeden model, rozšiřte :Ember.ObjectController

App.TodoItemController = Ember.ObjectController.extend({
});

Kontroler může také představovat kolekci modelů rozšířením Ember.ArrayController. Například TodoListController představuje pole todoList objektů. Kontroler se seřadí podle ID seznamu seznamu v sestupném pořadí:

App.TodoListController = Ember.ArrayController.extend({
    error: "",
    sortProperties: ['todoListId'],
    sortAscending: true,

    // ...

Kontroler definuje funkci s názvem addTodoList, která vytvoří novou položku todoList a přidá ji do pole. Pokud chcete zjistit, jak se tato funkce volá, otevřete soubor šablony s názvem todoListTemplate.html ve složce Šablony. Následující kód šablony sváže tlačítko s addTodoList funkcí :

<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>

Kontroler obsahuje error také vlastnost, která obsahuje chybovou zprávu. Tady je kód šablony pro zobrazení chybové zprávy (také v todoListTemplate.html):

<p class="error">{{error}}</p>

Trasy

Router.js definuje trasy a výchozí šablonu, která se má zobrazit, nastaví stav aplikace a přiřadí adresy URL trasám:

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("about");
    this.route("todoList", { path: "/todo" });
});

TodoListRoute.js načte data pro TodoListRoute přepsáním funkce setupController:

App.TodoListRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set('content', App.TodoList.find());
    }
});

Ember používá konvence vytváření názvů ke shodě adres URL, názvů tras, kontrolerů a šablon. Další informace najdete http://emberjs.com/guides/routing/defining-your-routes/ v dokumentaci k EmberJS.

Šablony

Složka Templates obsahuje čtyři šablony:

• application.hbs: Výchozí šablona, která se vykreslí při spuštění aplikace.
• about.hbs: Šablona pro trasu "/about".
• index.hbs: Šablona pro kořenovou trasu "/".
• todoList.hbs: Šablona trasy "/todo".
• _navbar.hbs: Šablona definuje navigační nabídku.

Šablona aplikace funguje jako stránka předlohy. Obsahuje záhlaví, zápatí a {{outlet}} pro vložení dalších šablon v závislosti na trase. Další informace o šablonách aplikací v Ember najdete v tématu http://guides.emberjs.com/v1.10.0/templates/the-application-template//.

Šablona "/todoList" obsahuje dva výrazy smyčky. Vnější smyčka je {{#each controller}}a vnitřní smyčka je {{#each todos}}. Následující kód ukazuje předdefinované Ember.Checkbox zobrazení, přizpůsobené App.TodoItemEditViewzobrazení a odkaz s deleteTodo akcí.

{{view Ember.Checkbox checkedBinding="isDone"}}

{{view App.TodoItemEditView valueBinding="title" class="required" disabledBinding="isDone"}}

<a href="#" {{action "deleteTodo" on="click" target="view"}}>X</a>

Třída definovaná HtmlHelperExtensions v souboru Controllers/HtmlHelperExtensions.cs definuje pomocnou funkci pro ukládání souborů šablon do mezipaměti a jejich vkládání, pokud je ladění v souboru Web.config nastaveno na hodnotu true . Tato funkce se volá ze souboru zobrazení ASP.NET MVC definovaného v souboru Views/Home/App.cshtml:

@if (HttpContext.Current.IsDebuggingEnabled)
{
    @Html.RenderEmber()
}
else
{
    @Scripts.Render("~/bundles/templates")
}

Funkce volá bez argumentů a vykreslí všechny soubory šablon ve složce Templates. Můžete také zadat podsložku nebo konkrétní soubor šablony.

Pokud je ladění v Web.config nepravdivé , aplikace obsahuje položku sady "~/bundles/templates". Tato položka sady je přidána v BundleConfig.cs pomocí knihovny kompilátoru Handlebars:

if (!HttpContext.Current.IsDebuggingEnabled)
{
    bundles.Add(new Bundle("~/bundles/templates", 
        new EmberHandlebarsBundleTransform()).Include(
            "~/scripts/app/templates/*.hbs"
        ));
}