EmberJS-Vorlage

von Xinyang Qiu

Die EmberJS MVC-Vorlage wurde von Nathan Totten, Thiago Santos und Xinyang Qiu geschrieben.

Herunterladen der EmberJS MVC-Vorlage

Die EmberJS SPA-Vorlage wurde entwickelt, um Ihnen die schnelle Erstellung interaktiver clientseitiger Web-Apps mit EmberJS zu erleichtern.

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

AJAX ist nichts Neues, aber heute gibt es JavaScript-Frameworks, die es einfacher machen, eine große anspruchsvolle SPA-Anwendung zu erstellen und zu verwalten. Außerdem erleichtern HTML 5 und CSS3 das Erstellen umfangreicher Benutzeroberflächen.

Die EmberJS SPA-Vorlage verwendet die Ember JavaScript-Bibliothek, um Seitenupdates von AJAX-Anforderungen zu verarbeiten. Ember.js verwendet die 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 Dokumentation zur KnockoutJS-Vorlage . 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 Vorlagendie Option Installierte Vorlagen aus, und erweitern Sie den Knoten Visual C# . Wählen Sie unter Visual C#die Option Web aus. Wählen Sie in der Liste der Projektvorlagen ASP.NET MVC 4-Webanwendung aus. Geben Sie dem Projekt einen Namen, und klicken Sie auf OK.

Wählen Sie im Assistenten Neues Projekt die OptionEmber.js SPA-Projekt aus.

Übersicht über emberJS SPA-Vorlagen

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 Vorlagensprache Handlebars geschrieben ist, 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 Anwendungsstatus. Controller stellen häufig Modelldaten für die entsprechenden Vorlagen bereit.
• Eine Ansicht übersetzt primitive Ereignisse aus der Anwendung und übergibt diese an den Controller.
• Ein Router verwaltet den Anwendungsstatus und hält URLs und Vorlagen synchron.

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

Die EmberJS SPA-Vorlage organisiert die Skripts in acht Ebenen:

• webapi_adapter.js, webapi_serializer.js: Erweitert die Ember Data-Bibliothek, um mit ASP.NET-Web-API zu arbeiten.
• Skripts/helpers.js: Definiert neue Hilfsprogramme für Ember Handlebars.
• Skripts/app.js: Erstellt die App und konfiguriert den Adapter und das Serialisierungsprogramm.
• Scripts/app/models/*.js: Definiert die Modelle.
• Scripts/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 Skripts/app/models definiert. Es gibt zwei Modelldateien: todoItem.js und todoList.js.

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

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

Modelle können Beziehungen zu anderen Modellen definieren:

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

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

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

Modelle können Über Beobachterfunktionen verfügen, die aufgerufen werden, wenn sich eine beobachtete Eigenschaft ändert:

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

Ansichten

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

Der folgende Code stammt beispielsweise aus Views/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 Ember.ObjectControllerSie :

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

Ein Controller kann auch eine Sammlung von Modellen darstellen, indem er erweitert Ember.ArrayControllerwird. Der TodoListController stellt beispielsweise 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 eine neue todoList erstellt und dem Array hinzufügt. Um zu sehen, wie diese Funktion aufgerufen wird, öffnen Sie die Vorlagendatei mit dem Namen todoListTemplate.html im 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 sehen Sie den Vorlagencode zum Anzeigen der Fehlermeldung (auch in todoListTemplate.html):

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

Routen

Router.js definiert die anzuzeigenden Routen und die Standardvorlage, richtet den Anwendungszustand ein und gleicht URLs mit Routen ab:

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

TodoListRoute.js lädt Daten für 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 http://emberjs.com/guides/routing/defining-your-routes/ in der EmberJS-Dokumentation.

Vorlagen

Der Ordner Templates 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 master Seite. Sie enthält eine Kopfzeile, eine Fußzeile und eine "{{outlet}}", in die je nach Route andere Vorlagen eingefügt werden sollen. 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 externe Schleife ist {{#each controller}}, und die innere Schleife ist {{#each todos}}. Der folgende Code zeigt eine integrierte Ember.Checkbox Ansicht, ein angepasstes App.TodoItemEditViewund einen Link 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 Controllers/HtmlHelperExtensions.cs definierte Klasse definiert eine Hilfsfunktion zum Zwischenspeichern und Einfügen von Vorlagendateien, wenn debug in der datei Web.config 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")
}

Die Funktion wird ohne Argumente aufgerufen und rendert alle Vorlagendateien im Ordner Vorlagen. Sie können auch einen Unterordner oder eine bestimmte Vorlagendatei angeben.

Wenn debug in Web.config auf false festgelegt ist, enthält die Anwendung das Paketelement "~/bundles/templates". Dieses Paketelement 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"
        ));
}