EmberJS 範本

作者： 一個是一個

EmberJS MVC 範本是由 Nathan Totten、Thiago 一文和一體體撰寫的 Qiu。

下載 EmberJS MVC 範本

EmberJS SPA 範本的設計目的是讓您開始使用 EmberJS 快速建置互動式用戶端 Web 應用程式。

「單頁應用程式」 (SPA) 是 Web 應用程式的一般詞彙，它會載入單一 HTML 頁面，然後動態更新頁面，而不是載入新頁面。 初始頁面載入之後，SPA 會透過 AJAX 要求與伺服器通訊。

AJAX 不是新的，但目前有 JavaScript 架構可讓您更輕鬆地建置和維護大型複雜 SPA 應用程式。 此外，HTML 5 和 CSS3 可讓您更輕鬆地建立豐富的 UI。

EmberJS SPA 範本會使用 Ember JavaScript 程式庫來處理來自 AJAX 要求的頁面更新。 Ember.js會使用資料系結來同步處理頁面與最新的資料。 如此一來，您就不需要撰寫任何逐步解說 JSON 資料和更新 DOM 的程式碼。 相反地，您會將宣告式屬性放在 HTML 中，告知Ember.js如何呈現資料。

在伺服器端，EmberJS 範本幾乎與一樣，與一樣。 它會使用 ASP.NET MVC 來提供 HTML 檔案，並 ASP.NET Web API處理來自用戶端的 AJAX 要求。 如需範本這些層面的詳細資訊，請參閱 此範本 檔。 本主題著重在一起，說明一個將它與 EmberJS 範本之間的差異。

建立 EmberJS SPA 範本專案

按一下上述的 [下載] 按鈕來下載並安裝範本。 您可能需要重新開機 Visual Studio。

在 [ 範本] 窗格中，選取 [ 已安裝的範本 ]，然後展開 [Visual C# ] 節點。 在 [Visual C#] 底下，選取 [Web]。 在專案範本清單中，選取 [ASP.NET MVC 4 Web 應用程式]。 為專案命名，然後按一下 [確定]。

在 [ 新增專案 精靈] 中，選取 [Ember.js SPA 專案]。

EmberJS SPA 範本概觀

EmberJS 範本會使用 jQuery、Ember.js、Handlebars.js的組合來建立平滑的互動式 UI。

Ember.js是使用用戶端 MVC 模式的 JavaScript 程式庫。

• 以 Handlebars 範本化語言撰寫的 範本會描述應用程式使用者介面。 在發行模式中， Handlebars 編譯 程式是用來組合和編譯控制碼欄範本。
• 模型會儲存它從伺服器取得的應用程式資料， (ToDo 清單和 ToDo 專案) 。
• 控制器會儲存應用程式狀態。 控制器通常會將模型資料呈現至對應的範本。
• 檢 視 會從應用程式轉譯基本事件，並將其傳遞至控制器。
• 路由器會管理應用程式狀態，讓 URL 和範本保持同步。

此外，Ember 資料庫可用來同步處理透過 RESTful API) 和用戶端模型從伺服器取得的 JSON 物件 (。

EmberJS SPA 範本會將腳本組織成八層：

• webapi_adapter.js，webapi_serializer.js：擴充 Ember 資料庫以使用 ASP.NET Web API。
• 腳本/helpers.js：定義新的 Ember 控制碼列協助程式。
• 腳本/app.js：建立應用程式並設定配接器和序列化程式。
• Scripts/app/models/*.js：定義模型。
• 腳本/app/views/*.js：定義檢視。
• Scripts/app/controllers/*.js：定義控制器。
• 腳本/應用程式/路由、腳本/應用程式/router.js：定義路由。
• Templates/*.hbs：定義控制碼欄範本。

讓我們更詳細地看看其中一些腳本。

模型

模型定義于 Scripts/app/models 資料夾中。 有兩個模型檔案：todoItem.js 和 todoList.js。

todo.model.js 定義 to-do 清單的用戶端 (瀏覽器) 模型。 有兩個模型類別：todoItem 和 todoList。 在 Ember 中，模型是 DS 的子類別。模型。 模型可以具有屬性的屬性：

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;
        }
    }
});

控制器

控制器定義于 Scripts/app/controllers 資料夾中。 若要表示單一模型，請擴充 Ember.ObjectController ：

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

控制器也可以藉由擴充 Ember.ArrayController 來表示模型的集合。 例如，TodoListController 代表 物件的陣列 todoList 。 控制器會以遞減順序依 todoList 識別碼排序：

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>

路由

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、路由名稱、控制器和範本。 如需詳細資訊，請參閱 http://emberjs.com/guides/routing/defining-your-routes/ EmberJS 檔。

範本

Templates 資料夾包含四個範本：

• application.hbs：應用程式啟動時轉譯的預設範本。
• about.hbs：「/about」 路由的範本。
• index.hbs：根 「/」 路由的範本。
• todoList.hbs：「/todo」 路由的範本。
• _navbar.hbs：範本會定義導覽功能表。

應用程式範本的作用就像主版頁面。 它包含頁首、頁尾和 「{{output}}」，以根據路由插入其他範本。 如需 Ember 中應用程式範本的詳細資訊，請參閱 http://guides.emberjs.com/v1.10.0/templates/the-application-template// 。

「/todoList」 範本包含兩個迴圈運算式。 外部迴圈為 {{#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>

HtmlHelperExtensions在 Controllers/HtmlHelperExtensions.cs 中定義的 類別會在偵錯設定為true 時定義協助程式函式，以在 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"
        ));
}