Ember.js 入門指南——handlebars基礎

標籤：

Ember採用handlebars模板庫作為應用程式的view層。Handlebars模板與普通的HTML非常相似。但是相比普通的HTML而言handlebars提供了非常豐富的Ember運算式。

       Ember採用handlebars模板並且擴充了很多功能，讓你使用handlebars就像使用HTML一樣簡單。你設定可以指定某個模板顯示你的應用程式介面，並且還不需要編寫更新介面顯示值的代碼，Ember會自動為你更新。

       在介紹模板之前先介紹一個非常有用、強大的工具 Ember CLI，使用這個工具可以自動產生Ember的代碼，甚至可以幫你構建一個新的Ember項目，為你省去很多重複的勞動。有關它的詳細介紹請看官網，上面有非常詳細的教程，或者你可以使用命令：ember –help 查看它的協助文檔，所涉及的外掛程式請自行安裝，如有不明白的可以聯絡我。下面我將使用這個工具建立一個Ember項目，並運行它。

1，Ember CLI 工具

建立項目命令:

ember new chapter2_tempalte

進入項目目錄並啟動伺服器：

cd chapter2_template

ember server

運行項目，瀏覽器開啟這個連結：http://localhost:4200/

如果你能看到如下資訊說明安裝成功了。

如果項目建立成功你可以繼續往下看，如果建立不成功請重試，因為後面的代碼都基於這個項目來示範的！！！對於產生的每個檔案和目錄請你看官網文檔，上面會有非常詳細的說明。為了方便懶人在此就簡單介紹其中幾個很重要的目錄：

目錄	說明
app	項目的主要代碼都是放在這個目錄下
app/controllers	存放C（MVC）層（controller）的代碼檔案
app/helpers	存放自訂的helper代碼檔案
app/models	存放M（MVC）層（model）代碼檔案
app/routes	存放項目路由設定代碼檔案
app/templates	存放項目模板代碼檔案
bower_components	第三方外掛程式庫
tests	單元測試檔案
vendor	不是使用npm和bower安裝的第三方外掛程式庫
ember-cli-build.js	設定構建規範
dist	存放項目靜態資源

       上述這些檔案或者目錄是後面開發過程經常會用到，只要你是使用ember new appName命令產生的項目都會包括上述這些目錄或者檔案。其中最重要的就是app目錄下的檔案、目錄了，從app裡面的目錄結果你就可以很清楚的看到這是個MVC架構的項目。Ember之所以能找到controller對應的template也是根據目錄和檔案的名稱找到的，Ember是有自己的一套命名規則的，詳情請看官方文檔。

2，模板定義

<!-- app/templates/application.hbs --><h1>Kittens</h1><p>Kittens are the cutest!!</p>

注意：代碼中的第一句注釋的內容表明了這個檔案的位置已經檔案名稱，後面的程式碼片段也會採用這種方式標註。如果沒有特別的說明第一句代碼都是注釋檔案的路徑及其名稱。

上述就是一個模板，非常簡單的模板，只有一個h1和p標籤，當你儲存這個檔案的時候Ember CLI會自動幫你重新整理頁面，不需要你手動去重新整理！此時你的瀏覽器頁面應該會看到如下資訊：

那麼恭喜你，模板定義成功了，至於為什麼執行localhost:4200就直接顯示到這裡等你慢慢學到controller和route的時候自然會明白，你就當application.hbs是一個預設的首頁，這樣你應該明白了吧！

 

3，handlbars運算式

       每一個模板都會有一個與之關聯的controller類。這就是模板能顯示運算式的值的原因，你可以在controller類中設定模板中運算式顯示的值，就像java web開發中在servlet或者Action調用request.setAttribute()方法設定某個屬性一樣。比如下面的模板代碼：

<!-- app/templates/application.hbs --> <!-- 這個是預設的模板，Ember會根據命名的規則自動找到 controllers/application 對應的模板是templates/application.hbs --> <h2 id="title">Welcome to Ember</h2> <!-- Ember的屬性自動更新：如果屬性在controller層改變了，頁面會自動重新整理顯示最新的值，太強大了！！！ --> Hello, <strong>{{firstName}} {{lastName}}</strong>!<br>My email is <b>{{email}}</b>

下面我們建立一個controller。這次我們用Ember CLI的命令建立： ember generate controller application，這句命令表示會建立一個controller並且名稱是application，然後我們會得到如下幾個檔案：

1. app/controllers/application.js   --controller本身

2. tests/unit/controllers/application-test.js   --controller對應的單元測試檔案

開啟你的檔案目錄，是不是可以在app/controllers下面看到了！

現在為了示範運算式我們在controller裡添加一些代碼：

// app/controllers/application.js import Ember from ‘ember‘; /** * Ember會根據命名規則自動找到templates/application.hbs這個模板， * @type {hash} 需要設定的hash對象 */export default Ember.Controller.extend({       //  設定兩個屬性       firstName: ‘chen‘,       lastName: ‘ubuntuvim‘,       email: ‘[email protected]‘});

然後修改顯示的模板如下：

<!-- app/templates/application.hbs --> <!-- 這個是預設的模板，Ember會根據命名的規則自動找到 controllers/application 對應的模板是templates/application.hbs --> <h2 id="title">Welcome to Ember</h2>  <!-- Ember的屬性自動更新：如果屬性在controller層改變了，頁面會自動重新整理顯示最新的值，太強大了！！！ --> Hello, <strong>{{firstName}} {{lastName}}</strong>!<br>My email is <b>{{email}}</b>

   儲存，然後頁面會自動重新整理，我們可以看到在controller設定的值，可以直接在模板上顯示了。

    這個就是運算式的綁定，後面你會學習到更多更有趣也更複雜的handlebasr運算式，HTML文檔的內容會根據這下運算式的改變而改變。

    隨著應用程式的規模不斷擴大，會有更多的模板和與之關聯的控制器。並且有時候一個模板還可以對應這多個控制器。也就是說模板上運算式的值可能有多個controller控制。

Ember.js 入門指南——handlebars基礎