Ember handlebars基礎(chǔ)

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

模板定義

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

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

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

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

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

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

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

handlbars表達(dá)式

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

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






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

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

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

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

// app/controllers/application.js


import Ember from 'ember';


/**
 * Ember會(huì)根據(jù)命名規(guī)則自動(dòng)找到templates/application.hbs這個(gè)模板，
 * @type {hash} 需要設(shè)置的hash對(duì)象
 */
export default Ember.Controller.extend({
    //  設(shè)置兩個(gè)屬性
    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>

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

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