Szablon EmberJS
Autor : Xinyang Qiu
Szablon MVC EmberJS jest napisany przez Nathana Tottena, Thiago Santosa i Xinyang Qiu.
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 początkowym załadowaniu 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 języki HTML 5 i CSS3 ułatwiają tworzenie rozbudowanych interfejsów użytkownika.
Szablon SPA EmberJS używa biblioteki JavaScript Ember 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 przechodzi przez dane JSON i aktualizuje dom. Zamiast tego należy umieścić atrybuty deklaratywne w kodzie HTML, które informują Ember.js, jak przedstawić 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 internetowego interfejsu 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 a 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 PROJEKT SPA.
Szablon EmberJS SPA — omówienie
Szablon EmberJS używa kombinacji zestawu jQuery, Ember.js, Handlebars.js w celu utworzenia płynnego, interaktywnego interfejsu użytkownika.
Ember.js to biblioteka języka JavaScript korzystająca ze wzorca MVC po stronie klienta.
- Szablon napisany w języku tworzenia szablonów na paskach obsługi opisuje interfejs użytkownika aplikacji. W trybie wydania kompilator pasków obsługi służy do tworzenia pakietów i kompilowania szablonu pasków obsługi.
- Model przechowuje dane aplikacji, które są odbierane 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, zachowując synchronizację adresów URL i szablonów.
Ponadto bibliotekę danych Ember można używać do synchronizowania obiektów JSON (uzyskanych z serwera za pośrednictwem interfejsu API RESTful) i modeli klienta.
Szablon EmberJS SPA organizuje skrypty w ośmiu warstwach:
- webapi_adapter.js, webapi_serializer.js: rozszerza bibliotekę danych Ember na pracę z ASP.NET internetowym interfejsem API.
- 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/aplikacje/widoki/*.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.
Modele
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 czynności do wykonania. Istnieją dwie klasy modeli: todoItem i todoList. W języku Ember modele są podklasami ds. Modelu. 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 po zmianie obserwowanej właściwości:
saveCheckbox: function () {
if(this.get("isDirty")){
if (this.get("todoItemId")) {
App.store.commit();
}
}
}.observes('isDone'),
Widoki
Widoki są definiowane w folderze Scripts/app/views. Widok tłumaczy zdarzenia z interfejsu użytkownika aplikacji. Procedura obsługi zdarzeń może wywoływać funkcje kontrolera lub po prostu wywoływać kontekst danych bezpośrednio.
Na przykład poniższy kod pochodzi z widoków/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;
}
}
});
Kontroler
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.ArrayControllerelement . 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.html w folderze Szablony. Poniższy kod szablonu wiąże przycisk z funkcją addTodoList :
<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>
Kontroler zawiera error również właściwość, która zawiera 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, konfiguruje stan aplikacji i dopasuje adresy 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 dopasowywania 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ę pakietu EmberJS.
Szablony
Folder Templates zawiera cztery szablony:
- application.hbs: domyślny szablon renderowany podczas uruchamiania aplikacji.
- about.hbs: szablon trasy "/about".
- index.hbs: szablon głównej trasy "/".
- todoList.hbs: szablon trasy "/todo".
- _navbar.hbs: Szablon definiuje menu nawigacji.
Szablon aplikacji działa jak strona wzorcowa. Zawiera nagłówek, stopkę i "{{outlet}}", aby wstawić inne szablony w zależności od trasy. Aby uzyskać więcej informacji na temat szablonów aplikacji w narzędziu 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.TodoItemEditViewelement 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 zdefiniowana HtmlHelperExtensions w pliku Controllers/HtmlHelperExtensions.cs definiuje funkcję pomocnika do buforowania i wstawiania plików szablonów, gdy debugowanie 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.
Gdy debugowanie jest fałszywe w Web.config, aplikacja zawiera element pakietu "~/bundles/templates". Ten element pakietu jest dodawany w pliku 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"
));
}