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: 'chendequanroob@gmail.com'
});

 

而後修改顯示的模板以下：

<!-- 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控制。