Ember.js學習總結

五柳-先生發表於2015-06-24

1.1.1 摘要

現在，我們經常都可以看到複雜的JavaScript應用程式，由於這些應用程式變得越來越複雜，一長串的jQuery回撥語句或者通過應用程式在各個狀態執行不同的函式呼叫，這些做法都會變得無法再讓人接受，這導致了JavaScript開發人員開始尋找一種組織和效率更優秀的開發方式。

實現組織和效率的其中一個最常用的架構模式，就是我們熟知的Model View Controller （MVC）模式，這種模式鼓勵開發人員將其應用程式的不同部分分割為更易於管理的模組，我們不必使用一個函式直接呼叫資料庫，通過建立了一個Model（模型或實體）來管理資料庫；通過模板（Template）或檢視（View）來簡化顯示程式碼；最後，通過使用控制器（Controller）來處理我們的應用程式的請求，MVC模式儘量降低每個模組之間的耦合度，提供程式的開發效率。

我們熟知的Javascript MVC框架有：Ember.js、Backbone.js、Knockout.js、Spine.js、Batman.js 和 Angular.js等。

圖1 Javascript MVC framework

通過上圖，我們我們可以清楚地瞭解Javascript MVC框架之間的特性，複雜度和學習曲線的區別，從左到右我們瞭解到各個Javascript MVC框架是否支援資料繫結（Data Binding）、模板（Templating）和持久化等特性，從下到上MVC框架的複雜性遞增，說實話我並沒有去對比每個框架之間的優劣，如果大家有做過相關的對比或看過有關的文章也不吝賜教。

在接下來的博文中，我們將介紹Ember.js的使用。

1.1.2 正文

Ember.js是一個JavaScript的MVC框架，它由Apple前僱員建立的SproutCore 2.0改名進化而來，Ember已經發布到1.0.0-RC.3。

MVC定義

在介紹Ember之前，首先讓我們回顧一下MVC模式，下面我們講通過一個例子介紹MVC模式在程式設計中的作用，例如：

1. 使用者執行一個操作，比如敲擊鍵盤或單擊滑鼠按鈕。

2. 控制器（Controller）接收輸入並觸發一個訊息給模型（Model）。

3. 模型根據訊息修改其內容（CRUD操作）。

4. 檢視（View）監視模型中的變更，並將相應地更新呈現到使用者介面中。

通過上面，我們瞭解到MVC中各個部件之間的作用和聯絡，在瞭解 MVC 模式的工作方式後，我們可以更加明確是否需要在我們的專案中引入Javascript的MVC框架。

在構建Ember應用程式時，我們會使用到六個主要部件：應用程式（Application）、模型（Model）、檢視（View）、模板（Template）、路由（Routing）和控制器（Controller）。

接下來，我們將通過實現一個具體的程式來介紹Ember的使用。

設定Ember

首先，我們需要引用一系列Javascript庫，所以我們在程式中新增js檔案，並且把以下js檔案儲存到該資料夾中：

ember.js: ember 1.0.0-rc.3

ember-data.js: revision 12

handlebars.js: handlebars 1.2.rc.3

jquery.js: jQuery 1.9.1

app.js: 我們的應用程程式碼

上面，我們把一系列的js檔案儲存到了本地中，當然我們也可以通過使用CDN（內容分發網路）來獲取相應Javascript庫，接下來，讓我們建立index.html頁面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <title></title>
    <link rel="stylesheet" href="" type="text/css" />
    <link rel="stylesheet" href="" type="text/css" />
</head>
<body>
    <!-- Add Javascript libs Reference -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
    <script src="js/libs/ember-1.0.0-rc.2.js"></script>
    <script src="js/libs/ember-data.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

現在，我們已經實現了第一個Ember程式，但是它還沒有具體功能，接下來，我們將給程式新增功能。

模板（Handlebars）

Ember.js使用的是Handlebars模板引擎，在我們開始使用之前，首先讓我們先簡單介紹一下handlebars.js；如果大家有使用過jQuery模板或其他指令碼模板，那麼對於掌握handlebars.js的使用就沒有太大的困難了，如果確實沒有使用過也不用擔心，因為handlebars.js的使用也是挺簡單的。

它讓開發人員可以混合原始HTML和Handlebars表示式生成渲染相應的HTML；表示式以包括在{{}}中，我們可以通過兩種方法把Handlebars模板載入到頁面中，我們可以直接內嵌的html頁面中，通過在頁面中新增型別為text/x-handlebars的指令碼標記內；或儲存到以handlebars或hbs為字尾的檔案中，然後通過Ember.js載入到頁面中。

為了簡單起見，我們把Handlebars指令碼直接嵌入到index.html頁面中。

<script type="text/x-handlebars" data-template-name="application">
        <h1>Employee System</h1>    
        {{outlet}}
</script>

上面，我們定義了模板application，並且新增了Handlebars表示式{{outlet}}，它的作用就類似一個佔位符，告訴Ember這裡的內容要動態地載入到頁面當中，當我們在瀏覽器中開啟index頁面並沒有顯示模板中的資訊。

應用程式（Application）

這是由於我們還沒有定義Ember程式，每個Ember應用程式都需要一個Ember應用程式例項，接下來讓我們在app.js中建立第一個Ember應用程式例項吧！

首先，我們建立一個Ember應用程式例項，具體實現如下：

// Creates an application instance.
App = Ember.Application.create();

上面，我們定義了一個名為 App 的Ember應用程式，當然我們可以把程式命名為任意的，但有一點我們要注意的是Ember要求變數的名稱都以大寫字母開頭。

現在，我們在瀏覽器中開啟頁面，可以顯示模板載入的資訊了。

圖2 Index頁面

也許有人會問Ember怎麼知道哪些模板需要載入呢？更重要的一點是，我們並沒有告訴Ember要載入的模板名稱，我們只是直接把模板application嵌入到頁面中。

其實，這裡有個“潛規則”：如果我們沒有定義ApplicationView（應用程式檢視），那麼Ember會自動生成一個ApplicationView並且預設載入名為application的模板，假設，我們把模板重新命名為application1，那麼預設的ApplicationView將找不到要載入的模板。

當然，我們也可以通過定義ApplicationView來指定需要載入的模板名稱，具體實現如

// Defines an application view, then loading
// relative templates.
App.ApplicationView = Ember.View.extend({
  templateName: 'application1'
});

現在，我們還有一個疑問就是表示式{{outlet}}中的內容該如何載入顯示呢？

路由（Routing）

由於{{outlet}}的內容是根據路由選擇後動態獲取的模板內容，所以我們先介紹Ember程式的路由，它可以幫助管理應該程式的狀態和使用者導航所需資源的資源；當我們的應用程式啟動時，路由是負責顯示模板，載入資料，以及管理應用程式的狀態。

現在，我們通過指定URL方式義來定義應用程式的路由，具體定義如下：

// Defines a goal routing home and
// the detail information of employee routing.
App.Router.map(function() {
    this.route("home", {path: "/"});
    this.route("employee", {path: "/employee/:employee_id"});
});

上面，我們定義了兩個路由分別是：應用程式的全域性路由home和employee，在index頁面進行載入同時訪問home路由的模板，資料和應用程式狀態；而employee路由將根據employee_id訪問每個一個員工的基本資訊。

接下來，我們定義home模板，具體實現如下：

<script type="text/x-handlebars" data-template-name="home">
        <h3>Employee Information</h3>
        <ul>
        {{#each item in employeeInfo}}
        <li>item</li>
        {{each}}
        </ul>
</script>

上面，我們定義了home模板，並且使用了each表達來迭代訪問employeeInfo物件中的元素，這時我們又有一個疑問了，那就是employeeInfo物件從哪裡獲取呢？

前面，我們提到Controller負責從Model中獲取資料，然後通過模板載入顯示，那麼我們可以通過顯市定義Controller來獲取資料，如果我們不定義的話，Ember會自動生成一個HomeController。

// Defines a custom controll.
 App.HomeController = Ember.Controller.extend({
      employeeInfo: ['Jackson Huang', 'Ada Li', 'JK Rush']
 });

上面，我們自定義了HomeController並且初始化了employeeInfo陣列，現在我們重新整理一下index頁面。

圖3 Index頁面

現在，我們又有一個疑問了，假如，我們程式有很多資源要訪問，那麼我們是否都顯式地定義Controller呢？

其實，我們還可以通過定義路由控制器實現自動選擇控制器，而且Ember會自動生成相應的Controller無需我們編寫任何程式碼，具體實現如下：

  // Defines a routing handler.
  App.HomeRoute = Ember.Route.extend({
    model: function(){
     return ['Jackson Huang', 'Ada Li', 'JK Rush'];
   },
   setupController: function(controller, model){    
    controller.set('content', model)
  }
});

現在，我們定義了路由控制器App.HomeRoute並且重寫了方法setupController，它接收路由處理程式匹配的控制器作為第一個引數即HomeController，接著我們給HomeController傳遞model引數，那麼HomeController就可以獲取相應的資料並且載入到模板中顯示了。

上面，我們成功把資料載入到頁面中，但是資料都是直接hardcode在Controller中，我們並沒有定義Model來獲取資料。

接下來，我們將實現從Fixtures中獲取資料，這時我們需要使用ember-data.js庫，具體實現如下。

// Customs a store.
App.Store = DS.Store.extend({
  // Notify the version of ember data api used.
  revision: 12,

  // Used FixtureAdapter.
  adapter: 'DS.FixtureAdapter'
});

上面，我們在app.js中定義DS.Store的子類App.Store，並且申明我們程式使用Ember data api的版本是12，當api版本更新或使用的版本太舊時，ember-data.js就會返回相應的錯誤資訊。

例如：當前的ember-data.js版本是12，如果我們在app.js中定義使用的是版本1的api，在控制檯中我們就會看到以下的錯誤資訊。

圖4 ember-data.js版本資訊

模型（Model）

模型是一個用來表示應用程式資料的物件，它可能是一個簡單的陣列或通過RESTful API動態檢索的資料；ember-data.js提供載入、對映和更新應用程式模型的API。

ember-data.js為每個應用程式都提供儲存空間，儲存空間負責保持已載入的Model和檢索還未載入的Model。

前面，我們定義了應用程式App，現在，需要給程式提供資料也就是員工資訊，所以我們要建立程式的模型（實體）Employee，接下來我們將實現模型的定義。

// Defines a employee model.
App.Employee = DS.Model.extend({
  name: DS.attr('string'),
  department: DS.attr('string'),
  title: DS.attr('string')
})

上面，我們定義了Employee模型，它繼承了DS.Model並且包含三個欄位分別是name，department和title。

接下來，我們通過定義App.Employee.FIXTURES，模擬從伺服器端獲取資料。

// Defines a JSON array.
App.Employee.FIXTURES = [
{
  id: 1,
  name: 'Jackson Huang',
  department: 'IT',
  title: 'programmer'
},
{
  id: 2,
  name: 'Ada Chen',
  department: 'purchasing',
  title: 'buyer'
},
{
  id: 3,
  name: 'JK Rush',
  department: 'IT',
  title: 'programmer'
},
{
  id: 4,
  name: 'Lucy Liu',
  department: 'IT',
  title: 'tester'
},
{
  id: 5,
  name: 'Julia Liu',
  department: 'HR',
  title: 'Manager'
}
];

上面，我們定義了JSON陣列App.Employee.FIXTURES，它包含了一系列員工的基本資訊。

接下來，我們修改home和新增employee模板，具體實現如下：

<!-- Home temp START -->
<script type="text/x-handlebars" data-template-name="home">
        <h3>
            Employee Information</h3>
        <ul>
            {{#each item in content}}
            <li>{{item}}</li>
            {{/each}}
        </ul>
        <h3>
            Employee</h3>
        <ul>
            {{#each employee in employees}} {{#linkTo "employee" employee}}
            <p>
                {{employee.name}}
            </p>
            {{/linkTo}} {{/each}}
        </ul>
</script>
<!-- Home temp END -->

<!-- Employee temp START -->
<script type="text/x-handlebars" data-template-name="employee">
        <div>
            <h3>
                Name: {{name}}</h3>
            <p>
                Department: {{department}}
            </p>
            <p>
                Title: {{title}}
            </p>
            {{#linkTo home class='btn btn-primary'}}Back{{/linkTo}}
        </div>
</script>
<!-- Employee temp END -->

在home模板中，我們新增each表示式迭代訪問employee元素，然後通過linkTo選擇employee路由；然後根據路由選擇在employee模板顯示相應的員工資訊。

圖5 程式頁面

現在，我們完成了Employee程式的基本功能了，提供使用者查下員工的資訊了。

1.1.3 總結

本文通過Demo例子介紹了Ember的使用，主要介紹了Ember的模型，控制器、模板和路由，由於Ember是Javascript MVC框架，而且作為初學者很容易困惑於它的自動生成和預設規則，所以我極力推薦大家要仔細看一遍Routing和Controller的官方文件。

我們通過介紹Ember的Handlerbars模板引擎，定義了Demo程式的頁面，然後通過路由控制器定義路由行為，根據路由行為選擇控制器，控制器負責資料載入和顯示。但我們的例子中還沒有設計的Ember檢視模組，如果想進一步學習請參考官方文件或書籍。

參考

關於作者:

[作者]： JK_Rush從事.NET開發和熱衷於開源高效能系統設計，通過博文交流和分享經驗，歡迎轉載，請保留原文地址，謝謝。
[出處]： http://www.cnblogs.com/rush/
[本文基於]: 署名-非商業性使用 3.0 許可協議釋出，歡迎轉載，演繹，但是必須保留本文的署名 JK_Rush （包含連結），且不得用於商業目的。如您有任何疑問或者授權方面的協商，請與我聯絡。

學習總結
2020-11-30
mysqlimport學習總結
2020-03-30
MySqlImport
Maven學習總結
2020-08-19
Maven
MyBatis 學習總結
2020-05-20
MyBatis
awk 學習總結
2019-12-10
JNI 學習總結
2019-05-25
tkinter學習總結
2019-04-05
SVG學習總結
2019-05-04
SVG
vue學習總結
2019-04-12
Vue
WorkFlow學習總結
2019-07-05
HTML學習總結
2019-02-10
HTML
Mybatis學習總結
2019-02-13
MyBatis
Kafka 總結學習
2021-06-26
Kafka
Typescript學習總結
2021-06-26
TypeScript
【TS】學習總結
2021-08-24
lua 學習總結
2018-08-28
vue 學習總結
2018-08-13
Vue
HSF學習總結
2018-10-12
ElasticSearch 學習總結
2018-09-06
Elasticsearch
BOM學習總結
2018-12-10
JavaWeb學習總結
2018-12-20
JavaWeb
Storm學習總結
2018-07-11
ORM
redis學習總結
2021-01-14
Redis
JVM學習總結
2020-11-01
JVM
Oracle學習總結
2020-11-30
Oracle
MySql學習總結
2020-09-24
MySql
Ajax學習總結
2020-09-30
WebRTC學習總結
2018-06-25
Web
spark 學習總結
2018-01-15
Spark
pandas 學習總結
2018-04-02
react學習總結
2016-12-12
React
GCD 學習總結
2018-06-13
GC
近期學習總結
2017-12-13
DOM學習總結
2018-01-06
numpy 學習總結
2018-01-12
ARKit學習總結
2017-07-21
UML學習總結
2014-04-21
javacc學習總結
2014-05-11
Java