Ember handlebars基礎(chǔ)

Ember采用handlebars模板庫作為應(yīng)用的view層。Handlebars模板與普通的HTML非常相似。但是相比普通的HTML而言handlebars提供了非常豐富的表達(dá)式。 Ember采用handlebars模板并且擴(kuò)展了很多功能，讓你使用handlebars就像使用HTML一樣簡單。

模板定義

在前一篇介紹了一個很重要的構(gòu)建工具Ember CLI，從本篇開始后面所創(chuàng)建的文件都是使用這個構(gòu)建工具來創(chuàng)建，先進(jìn)入到項目路徑下再執(zhí)行Ember CLI命令。

創(chuàng)建一個模板命令ember g template application

由于這個模板在創(chuàng)建項目的時候就已經(jīng)有了，所以會提示你是否覆蓋原來的文件，你可以選擇覆蓋或者不覆蓋都行。

<h2>Kittens</h2>
<p>
Kittens are the cutest!!
</p>

注意：代碼中的第一句注釋的內(nèi)容表明了這個文件的位置已經(jīng)文件名稱，后面的代碼片段也會采用這種方式標(biāo)注。如果沒有特別的說明第一句代碼都是注釋文件的路徑及其名稱。

上述就是一個模板，非常簡單的模板，只有一個h1和p標(biāo)簽，當(dāng)你保存這個文件的時候Ember CLI會自動幫你刷新頁面，不需要你手動去刷新！此時你的瀏覽器頁面應(yīng)該會看到如下信息：

那么恭喜你，模板定義成功了，至于為什么執(zhí)行http://localhost:4200就直接顯示到這里等你慢慢學(xué)到controller和route的時候自然會明白，你就當(dāng)application.hbs是一個默認(rèn)的首頁，這樣你應(yīng)該明白了吧！

handlbars表達(dá)式

每一個模板都會有一個與之關(guān)聯(lián)的controller類、route類、model類（當(dāng)然這些類是不是必須有的）。這就是模板能顯示表達(dá)式的值的原因，你可以在controller類中設(shè)置模板中表達(dá)式顯示的值，就像java web開發(fā)中在servlet或者Action調(diào)用request.setAttribute()方法設(shè)置某個屬性一樣。比如下面的模板代碼：

<h2 id="title">Welcome to Ember</h2>






Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

下面我們創(chuàng)建一個controller。這次我們用Ember CLI的命令創(chuàng)建： ember generate controller application，這句命令表示會創(chuàng)建一個controller并且名稱是application，然后我們會得到如下幾個文件：

1. app/controllers/application.js --controller本身
2. tests/unit/controllers/application-test.js --controller對應(yīng)的單元測試文件

打開你的文件目錄，是不是可以在app/controllers下面看到了！ 現(xiàn)在為了演示表達(dá)式我們在controller里添加一些代碼：

// app/controllers/application.js


import Ember from 'ember';


/**
 * Ember會根據(jù)命名規(guī)則自動找到templates/application.hbs這個模板，
 * @type {hash} 需要設(shè)置的hash對象
 */
export default Ember.Controller.extend({
    //  設(shè)置兩個屬性
    firstName: 'chen',
    lastName: 'ubuntuvim',
    email: 'chendequanroob@gmail.com'
});

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

<h2 id="title">Welcome to Ember</h2>




Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

保存，然后頁面會自動刷新（Ember CLI會自動檢測文件是否改變，然后重新編譯項目），我們可以看到在controller設(shè)置的值，可以直接在模板上顯示了。

這個就是表達(dá)式的綁定，后面你會學(xué)習(xí)到更多更有趣也更復(fù)雜的handlebasr表達(dá)式。 隨著應(yīng)用程序的規(guī)模不斷擴(kuò)大，會有更多的模板和與之關(guān)聯(lián)的控制器。并且有時候一個模板還可以對應(yīng)這多個控制器。也就是說模板上表達(dá)式的值可能有多個controller控制。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。绻阌X得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力！！