EmberJS テンプレート

シンヤン・チウ

EmberJS MVC テンプレートは、Nathan Totten、Thiago Santos、および Xinyang Qiu によって記述されています。

EmberJS MVC テンプレートをダウンロードする

EmberJS SPA テンプレートは、EmberJS を使用して対話型のクライアント側 Web アプリの構築をすばやく開始できるように設計されています。

"シングルページ アプリケーション" (SPA) は、新しいページを読み込む代わりに、1 つの HTML ページを読み込んでからページを動的に更新する Web アプリケーションの一般的な用語です。 最初のページ読み込み後、SPA は AJAX 要求を介してサーバーと通信します。

AJAX は何も新しい機能ではありませんが、現在、大規模な洗練された SPA アプリケーションの構築と保守を容易にする JavaScript フレームワークがあります。 また、HTML 5 と CSS3 を使用すると、豊富な UI を簡単に作成できます。

EmberJS SPA テンプレートは 、Ember JavaScript ライブラリを使用して AJAX 要求からのページ更新を処理します。 Ember.js では、データ バインディングを使用して、ページを最新のデータと同期します。 こうすることで、JSON データを処理して DOM を更新するコードを書かなくても済みます。 代わりに、データの提示方法を Ember.js 示す宣言型属性を HTML に配置します。

サーバー側では、EmberJS テンプレートは KnockoutJS SPA テンプレートとほぼ同じです。 ASP.NET MVC を使用して HTML ドキュメントを提供し、ASP.NET Web API を使用してクライアントからの AJAX 要求を処理します。 テンプレートのこれらの側面の詳細については、 KnockoutJS テンプレート のドキュメントを参照してください。 このトピックでは、Knockout テンプレートと EmberJS テンプレートの違いについて説明します。

EmberJS SPA テンプレート プロジェクトを作成する

上の [ダウンロード] ボタンをクリックして、テンプレートをダウンロードしてインストールします。 Visual Studio を再起動することが必要な場合があります。

[テンプレート] ウィンドウ で 、[ インストールされているテンプレート ] を選択し、[ Visual C# ] ノードを展開します。 [Visual C#] で [Web] を選択します。 プロジェクト テンプレートの一覧で、[ MVC 4 Web アプリケーション ASP.NET 選択します。 プロジェクトに名前を付け、[ OK] をクリックします。

新しいプロジェクト ウィザードで、SPA プロジェクトEmber.js 選択します。

EmberJS SPA テンプレートの概要

EmberJS テンプレートでは、jQuery、Ember.js、Handlebars.js の組み合わせを使用して、滑らかな対話型 UI を作成します。

Ember.js は、クライアント側の MVC パターンを使用する JavaScript ライブラリです。

• Handlebars テンプレート言語で記述された テンプレートは、アプリケーションのユーザー インターフェイスを記述します。 リリース モードでは、 Handlebars コンパイラ を使用して、ハンドル バー テンプレートをバンドルしてコンパイルします。
• モデルには、サーバーから取得したアプリケーション データ (ToDo リストと ToDo 項目) が格納されます。
• コントローラーには、アプリケーションの状態が格納されます。 コントローラーは、多くの場合、対応するテンプレートにモデル データを表示します。
• ビューは、アプリケーションからプリミティブ イベントを変換し、コントローラーに渡します。
• ルーターはアプリケーションの状態を管理し、URL とテンプレートの同期を維持します。

さらに、Ember Data ライブラリを使用して、JSON オブジェクト (RESTful API を介してサーバーから取得) とクライアント モデルを同期できます。

EmberJS SPA テンプレートは、スクリプトを 8 つのレイヤーに編成します。

• webapi_adapter.js、webapi_serializer.js: ASP.NET Web API と連携するように Ember Data ライブラリを拡張します。
• Scripts/helpers.js: 新しい Ember Handlebars ヘルパーを定義します。
• スクリプト/app.js: アプリを作成し、アダプターとシリアライザーを構成します。
• Scripts/app/models/*.js: モデルを定義します。
• Scripts/app/views/*.js: ビューを定義します。
• Scripts/app/controllers/*.js: コントローラーを定義します。
• Scripts/app/routes、Scripts/app/router.js: ルートを定義します。
• Templates/*.hbs: ハンドルバー テンプレートを定義します。

これらのスクリプトの一部を詳しく見てみましょう。

モデル

モデルは Scripts/app/models フォルダーで定義されます。 todoItem.js と todoList.jsの 2 つのモデル ファイルがあります。

todo.model.js は、to-do リストのクライアント側 (ブラウザー) モデルを定義します。 todoItem と todoList の 2 つのモデル クラスがあります。 Ember では、モデルは DS.Model のサブクラスです。 モデルは、属性を持つプロパティを持つことができます。

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

モデルでは、他のモデルとのリレーションシップを定義できます。

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

モデルは、他のプロパティにバインドする計算プロパティを持つことができます。

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

モデルにはオブザーバー関数を含めることができます。これは、観察されたプロパティが変更されたときに呼び出されます。

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

見解

ビューは Scripts/app/views フォルダーで定義されます。 ビューは、アプリケーション UI からイベントを変換します。 イベント ハンドラーは、コントローラー関数にコールバックすることも、単にデータ コンテキストを直接呼び出すこともできます。

たとえば、次のコードはビュー/TodoItemEditView.jsです。 入力テキスト フィールドのイベント処理を定義します。

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

コントローラーは、Scripts/app/controllers フォルダーで定義されています。 1 つのモデルを表すには、 Ember.ObjectControllerを拡張します。

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

コントローラーは、 Ember.ArrayControllerを拡張することで、モデルのコレクションを表すこともできます。 たとえば、TodoListController は、 todoList オブジェクトの配列を表します。 コントローラーは、todoList ID で降順に並べ替えます。

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

    // ...

コントローラーは addTodoList という名前の関数を定義し、新しい todoList を作成して配列に追加します。 この関数の呼び出し方法を確認するには、templates フォルダーで todoListTemplate.htmlという名前のテンプレート ファイルを開きます。 次のテンプレート コードは、ボタンを addTodoList 関数にバインドします。

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

コントローラーには、エラー メッセージを保持する error プロパティも含まれています。 エラー メッセージを表示するテンプレート コードを次に示します (todoListTemplate.html)。

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

Routes

Router.js は、表示するルートと既定のテンプレートを定義し、アプリケーションの状態を設定し、URL をルートに一致させます。

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

TodoListRoute.js setupController 関数をオーバーライドして、TodoListRoute のデータを読み込みます。

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

Ember では、名前付け規則を使用して、URL、ルート名、コントローラー、テンプレートを照合します。 詳細については、EmberJS ドキュメントの http://emberjs.com/guides/routing/defining-your-routes/ を参照してください。

テンプレート

Templates フォルダーには、次の 4 つのテンプレートが含まれています。

• application.hbs: アプリケーションの起動時にレンダリングされる既定のテンプレート。
• about.hbs: "/about" ルートのテンプレート。
• index.hbs: ルート "/" ルートのテンプレート。
• todoList.hbs: "/todo" ルートのテンプレート。
• _navbar.hbs: テンプレートによってナビゲーション メニューが定義されます。

アプリケーション テンプレートはマスター ページのように機能します。 ルートに応じて他のテンプレートを挿入するためのヘッダー、フッター、および "{{outlet}}" が含まれています。 Ember のアプリケーション テンプレートの詳細については、「 http://guides.emberjs.com/v1.10.0/templates/the-application-template//」を参照してください。

"/todoList" テンプレートには、2 つのループ式が含まれています。 外側のループは {{#each controller}}され、内部ループは {{#each todos}}。 次のコードは、組み込みの Ember.Checkbox ビュー、カスタマイズされた App.TodoItemEditView、および 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>

Controllers/HtmlHelperExtensions.cs で定義されている HtmlHelperExtensions クラスは、 デバッグ が Web.config ファイルで true に設定されている場合にテンプレート ファイルをキャッシュおよび挿入するヘルパー関数を定義します。 この関数は、Views/Home/App.cshtml で定義されている ASP.NET MVC ビュー ファイルから呼び出されます。

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

引数なしで呼び出された関数は、Templates フォルダー内のすべてのテンプレート ファイルをレンダリングします。 サブフォルダーまたは特定のテンプレート ファイルを指定することもできます。

Web.configで デバッグ が false の 場合、アプリケーションにはバンドル項目 "~/bundles/templates" が含まれます。 このバンドル項目は、Handlebars コンパイラ ライブラリを使用して、BundleConfig.csに追加されます。

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