EmberJS-Vorlage

von Xinyang Qiu

Die EmberJS MVC-Vorlage wird von Domingo Totten, Thiago Santos und Xinyang Qiu geschrieben.

Herunterladen der EmberJS MVC-Vorlage

Die EmberJS SPA-Vorlage ist so konzipiert, dass Sie schnell mit der Erstellung interaktiver clientseitiger Web-Apps mithilfe von EmberJS beginnen können.

"Einzelseitenanwendung" (Single Page Application, SPA) ist der allgemeine Begriff für eine Webanwendung, die eine einzelne HTML-Seite lädt und dann die Seite dynamisch aktualisiert, anstatt neue Seiten zu laden. Nach dem Laden der ersten Seite spricht die SPA mit dem Server über AJAX-Anforderungen.

AJAX ist nichts Neues, aber heute gibt es JavaScript-Frameworks, die das Erstellen und Verwalten einer großen anspruchsvollen SPA-Anwendung vereinfachen. Außerdem erleichtern HTML 5 und CSS3 die Erstellung umfangreicher UIs.

Die EmberJS SPA-Vorlage verwendet die Ember JavaScript-Bibliothek, um Seitenaktualisierungen von AJAX-Anforderungen zu verarbeiten. Ember.js verwendet datenbindung, um die Seite mit den neuesten Daten zu synchronisieren. Auf diese Weise müssen Sie keinen Code schreiben, der die JSON-Daten durchläuft und das DOM aktualisiert. Stattdessen fügen Sie deklarative Attribute in den HTML-Code ein, die Ember.js angeben, wie die Daten dargestellt werden.

Auf der Serverseite ist die EmberJS-Vorlage fast identisch mit der KnockoutJS SPA-Vorlage. Es verwendet ASP.NET MVC, um HTML-Dokumente zu verarbeiten, und ASP.NET Web-API, um AJAX-Anforderungen vom Client zu verarbeiten. Weitere Informationen zu diesen Aspekten der Vorlage finden Sie in der KnockoutJS-Vorlagendokumentation . In diesem Thema werden die Unterschiede zwischen der Knockout-Vorlage und der EmberJS-Vorlage behandelt.

Erstellen eines EmberJS SPA-Vorlagenprojekts

Laden Sie die Vorlage herunter, und installieren Sie sie, indem Sie oben auf die Schaltfläche "Herunterladen" klicken. Möglicherweise müssen Sie Visual Studio neu starten.

Wählen Sie im Bereich "Vorlagen " die Option "Installierte Vorlagen " aus, und erweitern Sie den Knoten "Visual C# ". Wählen Sie unter Visual C#"Web" aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Benennen Sie das Projekt, und klicken Sie auf 'OK'.

Wählen Sie im Assistenten Neues Projekt das Ember.js SPA Projekt aus.

EmberJS SPA-Template Übersicht

Die EmberJS-Vorlage verwendet eine Kombination aus jQuery, Ember.js, Handlebars.js, um eine reibungslose, interaktive Benutzeroberfläche zu erstellen.

Ember.js ist eine JavaScript-Bibliothek, die ein clientseitiges MVC-Muster verwendet.

• Eine Vorlage, die in der Sprache der Handlebars-Vorlagen geschrieben wurde, beschreibt die Benutzeroberfläche der Anwendung. Im Releasemodus wird der Handlebars-Compiler verwendet, um die Handlebars-Vorlage zu bündeln und zu kompilieren.
• Ein Modell speichert die Anwendungsdaten, die es vom Server abruft (ToDo-Listen und ToDo-Elemente).
• Ein Controller speichert den Anwendungszustand. Controller präsentieren häufig Modelldaten für die entsprechenden Vorlagen.
• Eine Ansicht übersetzt primitive Ereignisse aus der Anwendung und übergibt diese an den Controller.
• Ein Router verwaltet den Anwendungsstatus, wobei URLs und Vorlagen synchronisiert werden.

Darüber hinaus kann die Ember-Datenbibliothek verwendet werden, um JSON-Objekte (abgerufen vom Server über eine RESTful-API) und die Clientmodelle zu synchronisieren.

Die Vorlage EmberJS SPA organisiert die Skripts in acht Ebenen:

• webapi_adapter.js, webapi_serializer.js: Erweitert die Ember-Datenbibliothek, um mit ASP.NET Web-API zu arbeiten.
• Skripts/helpers.js: Definiert neue Ember-Handlebars-Hilfsprogramme.
• Skripts/app.js: Erstellt die App und konfiguriert den Adapter und serialisierer.
• Scripts/app/models/*.js: Definiert die Modelle.
• Skripts/app/views/*.js: Definiert die Ansichten.
• Scripts/app/controllers/*.js: Definiert die Controller.
• Scripts/app/routes, Scripts/app/router.js: Definiert die Routen.
• Templates/*.hbs: Definiert die Handlebars-Vorlagen.

Sehen wir uns einige dieser Skripts genauer an.

Modelle

Die Modelle werden im Ordner "Scripts/app/models" definiert. Es gibt zwei Modelldateien: todoItem.js und todoList.js.

todo.model.js definiert die clientseitigen Modelle (Browser) für die to-do-Listen. Es gibt zwei Modellklassen: todoItem und todoList. In Ember sind Modelle Unterklassen von DS. Modell. Ein Modell kann Eigenschaften mit Attributen haben:

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

Modelle können Beziehungen zu anderen Modellen definieren:

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

Modelle können berechnete Eigenschaften haben, die an andere Eigenschaften gebunden sind:

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

Modelle können Beobachterfunktionen aufweisen, die aufgerufen werden, wenn eine beobachtete Eigenschaft geändert wird:

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

Ansichten

Die Ansichten werden im Ordner "Scripts/app/views" definiert. Eine Ansicht übersetzt Ereignisse aus der Benutzeroberfläche der Anwendung. Ein Ereignishandler kann auf Controllerfunktionen zurückrufen oder einfach den Datenkontext direkt aufrufen.

Der folgende Code stammt beispielsweise aus Ansichten/TodoItemEditView.js. Es definiert die Ereignisbehandlung für ein Eingabetextfeld.

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

Die Controller werden im Ordner "Scripts/app/controllers" definiert. Um ein einzelnes Modell darzustellen, erweitern Sie Ember.ObjectController:

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

Ein Controller kann auch eine Sammlung von Modellen darstellen, indem er Ember.ArrayController erweitert. Beispielsweise stellt der TodoListController ein Array von todoList Objekten dar. Der Controller sortiert nach todoList-ID in absteigender Reihenfolge:

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

    // ...

Der Controller definiert eine Funktion namens addTodoList, die einen neuen TodoList erstellt und dem Array hinzufügt. Um zu sehen, wie diese Funktion aufgerufen wird, öffnen Sie die Vorlagendatei mit dem Namen todoListTemplate.htmlim Ordner "Vorlagen". Der folgende Vorlagencode bindet eine Schaltfläche an die addTodoList Funktion:

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

Der Controller enthält auch eine error Eigenschaft, die eine Fehlermeldung enthält. Hier ist der Vorlagencode zum Anzeigen der Fehlermeldung (auch in todoListTemplate.html):

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

Routen

Router.js definiert die Routen und die Standardvorlage zum Anzeigen, stellt den Anwendungszustand ein und ordnet URLs den Routen zu.

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

TodoListRoute.js lädt Daten für die TodoListRoute, indem die setupController-Funktion überschrieben wird.

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

Ember verwendet Benennungskonventionen, um URLs, Routennamen, Controller und Vorlagen abzugleichen. Weitere Informationen finden Sie in http://emberjs.com/guides/routing/defining-your-routes/ der EmberJS-Dokumentation.

Vorlagen

Der Ordner "Vorlagen" enthält vier Vorlagen:

• application.hbs: Die Standardvorlage, die beim Starten der Anwendung gerendert wird.
• about.hbs: Die Vorlage für die Route "/about".
• index.hbs: Die Vorlage für die Stammroute "/".
• todoList.hbs: Die Vorlage für die Route "/todo".
• _navbar.hbs: Die Vorlage definiert das Navigationsmenü.

Die Anwendungsvorlage fungiert wie eine Masterseite. Sie enthält eine Kopfzeile, eine Fußzeile und ein "{{outlet}}", um je nach Route andere Vorlagen einzufügen. Weitere Informationen zu Anwendungsvorlagen in Ember finden Sie unter http://guides.emberjs.com/v1.10.0/templates/the-application-template//.

Die Vorlage "/todoList" enthält zwei Schleifenausdrücke. Die äußere Schleife ist {{#each controller}}, und die Innenschleife ist {{#each todos}}. Der folgende Code zeigt eine integrierte Ember.Checkbox Ansicht, eine angepasste App.TodoItemEditViewund eine Verknüpfung mit einer deleteTodo Aktion.

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

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

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

Die HtmlHelperExtensions in Controller/HtmlHelperExtensions.cs definierte Klasse definiert eine Hilfsfunktion zum Zwischenspeichern und Einfügen von Vorlagendateien, wenn das Debuggen in der Web.config Datei auf "true " festgelegt ist. Diese Funktion wird aus der in Views/Home/App.cshtml definierten ASP.NET MVC-Ansichtsdatei aufgerufen:

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

Wird ohne Argumente aufgerufen, rendert die Funktion alle Vorlagendateien im Ordner "Vorlagen". Sie können auch einen bestimmten Unterordner oder eine bestimmte Vorlagendatei angeben.

Wenn debug in Web.config false ist, enthält die Anwendung das Bundle-Element "~/bundles/templates". Dieses Bundleelement wird in BundleConfig.cs mithilfe der Handlebars-Compilerbibliothek hinzugefügt:

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