Szablon EmberJS

Autor : Xinyang Qiu

Szablon MVC EmberJS jest napisany przez Nathana Tottena, Thiago Santosa i Xinyang Qiu.

Pobieranie szablonu MVC pakietu EmberJS

Szablon EmberJS SPA został zaprojektowany w celu szybkiego rozpoczęcia tworzenia interaktywnych aplikacji internetowych po stronie klienta przy użyciu pakietu EmberJS.

"Aplikacja jednostronicowa" (SPA) to ogólny termin dla aplikacji internetowej, która ładuje pojedynczą stronę HTML, a następnie aktualizuje stronę dynamicznie, zamiast ładować nowe strony. Po załadowaniu początkowej strony SPA rozmawia z serwerem za pośrednictwem żądań AJAX.

AJAX nie jest niczym nowym, ale obecnie istnieją struktury JavaScript, które ułatwiają tworzenie i konserwację dużej wyrafinowanej aplikacji SPA. Ponadto html 5 i CSS3 ułatwiają tworzenie rozbudowanych interfejsów użytkownika.

Szablon spa EmberJS używa biblioteki Ember JavaScript do obsługi aktualizacji stron z żądań AJAX. Ember.js używa powiązania danych do synchronizowania strony z najnowszymi danymi. W ten sposób nie trzeba pisać żadnego kodu, który przetwarza dane JSON i aktualizuje DOM. Zamiast tego należy umieścić atrybuty deklaratywne w kodzie HTML, które informują Ember.js, jak prezentować dane.

Po stronie serwera szablon EmberJS jest prawie identyczny z szablonem KnockoutJS SPA. Używa ASP.NET MVC do obsługi dokumentów HTML i ASP.NET Web API do obsługi żądań AJAX od klienta. Aby uzyskać więcej informacji na temat tych aspektów szablonu, zapoznaj się z dokumentacją szablonu KnockoutJS . Ten temat koncentruje się na różnicach między szablonem Knockout i szablonem EmberJS.

Tworzenie projektu szablonu SPA EmberJS

Pobierz i zainstaluj szablon, klikając przycisk Pobierz powyżej. 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ę Ember.js SPA Project.

Omówienie szablonu SPA EmberJS

Szablon EmberJS używa kombinacji biblioteki jQuery, Ember.js, Handlebars.js w celu utworzenia płynnego, interaktywnego interfejsu użytkownika.

Ember.js to biblioteka języka JavaScript, która używa wzorca MVC po stronie klienta.

• Szablon napisany w języku tworzenia szablonów paska obsługi opisuje interfejs użytkownika aplikacji. W trybie produkcyjnym kompilator Handlebars służy do bundlowania i kompilowania szablonu Handlebars.
• Model przechowuje dane aplikacji pobierane z serwera (listy zadań do wykonania i elementy zadań do wykonania).
• Kontroler przechowuje stan aplikacji. Kontrolery często przedstawiają dane modelu odpowiednim szablonom.
• Widok tłumaczy zdarzenia pierwotne z aplikacji i przekazuje je do kontrolera.
• Router zarządza stanem aplikacji, utrzymuje zsynchronizowane adresy URL i szablony.

Ponadto biblioteka danych Ember może służyć do synchronizowania obiektów JSON (uzyskanych z serwera za pośrednictwem interfejsu API RESTful) i modeli klienta.

Szablon EmberJS SPA organizuje skrypty w osiem warstw:

• webapi_adapter.js, webapi_serializer.js: rozszerza bibliotekę danych Ember w celu pracy z interfejsem API sieci Web ASP.NET.
• Skrypty/helpers.js: definiuje nowych pomocników pasków obsługi Ember.
• Skrypty/app.js: tworzy aplikację i konfiguruje adapter i serializator.
• Skrypty/aplikacje/modele/*.js: definiuje modele.
• Skrypty/app/views/*.js: definiuje widoki.
• Skrypty/aplikacje/kontrolery/*.js: definiuje kontrolery.
• Skrypty/aplikacja/trasy, Skrypty/aplikacja/router.js: Definiuje trasy.
• Templates/*.hbs: Definiuje szablony pasków obsługi.

Przyjrzyjmy się dokładniej niektórym z tych skryptów.

Models

Modele są definiowane w folderze Scripts/app/models. Istnieją dwa pliki modelu: todoItem.js i todoList.js.

todo.model.js definiuje modele po stronie klienta (przeglądarki) dla list to-do. Istnieją dwie klasy modeli: todoItem i todoList. W Emberze modele są podklasami DS.Model. Model może mieć właściwości z atrybutami:

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

Modele mogą definiować relacje z innymi modelami:

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

Modele mogą mieć obliczone właściwości powiązane z innymi właściwościami:

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

Modele mogą mieć funkcje obserwatora, które są wywoływane w przypadku zmiany obserwowanej właściwości:

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

Widoki

Widoki są zdefiniowane w folderze Scripts/app/views. Widok tłumaczy zdarzenia z interfejsu użytkownika aplikacji. Obsługiwacz zdarzeń może odwołać się do funkcji kontrolera lub bezpośrednio do kontekstu danych.

Na przykład poniższy kod pochodzi z views/TodoItemEditView.js. Definiuje obsługę zdarzeń dla pola tekstowego wejściowego.

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 są zdefiniowane w folderze Scripts/app/controllers. Aby reprezentować pojedynczy model, rozszerz polecenie Ember.ObjectController:

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

Kontroler może również reprezentować kolekcję modeli, rozszerzając Ember.ArrayController. Na przykład TodoListController reprezentuje tablicę todoList obiektów. Kontroler sortuje według identyfikatora todoList w kolejności malejącej:

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

    // ...

Kontroler definiuje funkcję o nazwie addTodoList, która tworzy nową listę zadań do wykonania i dodaje ją do tablicy. Aby zobaczyć, jak ta funkcja jest wywoływana, otwórz plik szablonu o nazwie todoListTemplate.htmlw folderze Templates. Poniższy kod szablonu wiąże przycisk z funkcją addTodoList :

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

Kontroler również zawiera właściwość error, która przechowuje komunikat o błędzie. Oto kod szablonu umożliwiający wyświetlenie komunikatu o błędzie (również w todoListTemplate.html):

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

Trasy

Router.js definiuje trasy i szablon domyślny do wyświetlania, konfigurowania stanu aplikacji i dopasowywania adresów URL do tras:

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

TodoListRoute.js ładuje dane dla usługi TodoListRoute przez zastąpienie funkcji setupController:

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

Ember używa konwencji nazewnictwa do dopasowania adresów URL, nazw tras, kontrolerów i szablonów. Aby uzyskać więcej informacji, zobacz http://emberjs.com/guides/routing/defining-your-routes/ dokumentację EmberJS.

Szablony

Folder Templates zawiera cztery szablony:

• application.hbs: domyślny szablon renderowany podczas uruchamiania aplikacji.
• about.hbs: szablon dla ścieżki "/about".
• index.hbs: szablon trasy głównej "/".
• todoList.hbs: Szablon dla ścieżki "/todo".
• _navbar.hbs: szablon definiuje menu nawigacji.

Szablon aplikacji działa jak strona wzorcowa. Zawiera nagłówek, stopkę i element "{{outlet}}" do wstawiania innych szablonów w zależności od ścieżki. Aby uzyskać więcej informacji na temat szablonów aplikacji w programie Ember, zobacz http://guides.emberjs.com/v1.10.0/templates/the-application-template//.

Szablon "/todoList" zawiera dwa wyrażenia pętli. Pętla zewnętrzna to {{#each controller}}, a wewnętrzna pętla to {{#each todos}}. Poniższy kod przedstawia wbudowany Ember.Checkbox widok, dostosowany App.TodoItemEditView element i link z akcją deleteTodo.

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

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

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

Klasa HtmlHelperExtensions zdefiniowana w Controllers/HtmlHelperExtensions.cs definiuje funkcję pomocnika do buforowania i wstawiania plików szablonów, gdy debug ma wartość true w pliku Web.config. Ta funkcja jest wywoływana z pliku widoku MVC ASP.NET zdefiniowanego w pliku Views/Home/App.cshtml:

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

Wywoływana bez argumentów funkcja renderuje wszystkie pliki szablonów w folderze Templates. Można również określić podfolder lub określony plik szablonu.

Kiedy debug jest false w Web.config, aplikacja zawiera element zestawu "~/bundles/templates". Ten element pakietu jest dodawany w BundleConfig.cs przy użyciu biblioteki kompilatora handlebars:

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