免費(fèi)AI編程助手
Ember handlebars條件表達(dá)式
handlebars模板提供了與一般語(yǔ)言類似的條件表達(dá)式，比如if、if……else……。
在介紹這些條件表達(dá)式之前，我們先做好演示的準(zhǔn)備工作。首先我會(huì)使用Ember CLI命令創(chuàng)建route、template，然后在創(chuàng)建的template上編寫(xiě)handlebars模板代碼。
先創(chuàng)建route：
ember generate route handlbars-conditions-exp-route
或者：
ember generate route handlbarsConditionsExpRoute
這兩個(gè)命令創(chuàng)建的文件名都是一樣的。最后Ember CLI會(huì)為我們自動(dòng)創(chuàng)建2個(gè)主要的文件：app/templates/handlbars-conditions-exp-route.hbs 和 app/routes/handlbars-conditions-exp-route.js
注意：如果你使用的是駝峰式的名稱Ember CLI會(huì)根據(jù)Ember的命名規(guī)范自動(dòng)創(chuàng)建以中劃線-分隔的名稱。為什么我是先使用命令創(chuàng)建route而不是template呢？？因?yàn)槟銊?chuàng)建route的同時(shí)Ember CLI會(huì)自動(dòng)給你創(chuàng)建一個(gè)對(duì)應(yīng)的模板文件，如果你是先創(chuàng)建template的話，你還需要手動(dòng)再執(zhí)行創(chuàng)建route的命令，即你要執(zhí)行2條命令(ember generate template handlbars-conditions-exp-route和ember generate route handlbars-conditions-exp-route)。
得到演示所需要的文件后回到正題，開(kāi)始介紹handlebars的條件判斷表達(dá)式。
為了演示先在route文件添加模擬條件代碼：
// app/routes/handlebars-condition-exp-route.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return {name: 'i2cao.xyz', age: 25, isAtWork: false, isReading: false };
// return { enable: true };
}
});
對(duì)于handlebars-condition-exp-route.js這個(gè)文件的內(nèi)容會(huì)在后面路由這一章詳細(xì)介紹，你可以暫且當(dāng)做是返回了一個(gè)對(duì)象到模板上。與EL表達(dá)式非常類似，你可以用.獲取對(duì)象里的屬性值（如：person.name）。
1，if表達(dá)式
{{#if model}}
Welcome back, <b>{{model.name}}</b> !
{{/if}}
每個(gè)條件表達(dá)式都要以#開(kāi)頭并且要有對(duì)應(yīng)的關(guān)閉標(biāo)簽，但是對(duì)于if標(biāo)簽來(lái)說(shuō)不是必須要關(guān)閉標(biāo)簽的，這里簡(jiǎn)單舉個(gè)例子：
<div class="{{if flag 'show' 'hide'}}">
測(cè)試內(nèi)容
</div>
這個(gè)
運(yùn)行的時(shí)候需要注意兩個(gè)地方，一個(gè)是瀏覽器執(zhí)行的
建議：創(chuàng)建之后的路由名字最好不要修改， 結(jié)果是輸出：This is else block...
因?yàn)?code>isAtWork和
如果
說(shuō)白了其實(shí)就是一個(gè)三目運(yùn)算。不難理解。不過(guò)這個(gè)例子與第一點(diǎn)講沒(méi)有關(guān)閉標(biāo)簽的
上述就是if標(biāo)簽相當(dāng)于一個(gè)三元運(yùn)算符,只是省略了?和:,他會(huì)根據(jù)屬性flag的值判斷是顯示那個(gè)CSS類，如果flag的值不是false，不是[]空數(shù)組，也不是null，也不是undefined則div會(huì)加上CSS類show，模板編譯之后的標(biāo)簽為hide模板編譯之后的標(biāo)簽為if判斷。沒(méi)別的難點(diǎn)。。。
URL。如果你也是使用駝峰式的命名方式（創(chuàng)建命名：ember generate route handlbarsConditionsExpRoute），那你的URL跟我的是一樣的，反正你只要記得執(zhí)行的URL跟你創(chuàng)建的route的名稱是一致的。當(dāng)然這個(gè)名字是可以修改的。在app/router.js里面修改，在Router.map里的代碼也是Ember CLI自動(dòng)創(chuàng)建的。我們可以看到有一個(gè)this.route('handlebarsConditionsExpRoute');這個(gè)就是你的路由的名稱。ember會(huì)根據(jù)默認(rèn)的命名規(guī)范查找route對(duì)應(yīng)的template，如果你修改了router.js里的名字你需要同時(shí)修改app/routes 和 app/templates 里相對(duì)應(yīng)的文件名。否則URL上的路由無(wú)法找到對(duì)應(yīng)的template顯示你的內(nèi)容，在router.js里配置的名字必須與app/routes目錄下的路由文件名字對(duì)應(yīng)，模板的名字不一定要與路由配置名稱對(duì)應(yīng)，應(yīng)該可以在route類中指定渲染的模板是那個(gè)，這個(gè)后面的內(nèi)容會(huì)講到（不是重點(diǎn)內(nèi)容，了解即可）。
說(shuō)明：可能你看到的我截圖給你的有點(diǎn)差別，是因?yàn)槲倚薷牧酥髂０?app/index.html)你可以在這個(gè)文件里添加自己喜歡的樣式，你一在app/index.html引入你的樣式，或者在ember-cli-build.js引入第三方樣式都可以，自定義的樣式放在public/assets/下，如果沒(méi)有目錄可以自行手動(dòng)創(chuàng)建，在此就不再贅述，這個(gè)不是本文的重點(diǎn)。2，
if……else……表達(dá)式
{{#if model.isAtWork}}
Ship that code..<br>
{{else if model.isReading}}
You can finish War and Peace eventually..<br>
{{else}}
This is else block...
{{/if}}isReading都是false。讀者可以自己修改app/routes/handlebars-condition-exp-route.js里面對(duì)應(yīng)的值然后查看輸出結(jié)果。3，
unless表達(dá)式unless表達(dá)式類似于非操作，當(dāng)model.isReading值為false的時(shí)候會(huì)輸出表達(dá)式里面的內(nèi)容。
{{#unless model.isReading}}
unless.....
{{/unless}}isReading值為false會(huì)輸出unless…否則不進(jìn)入表達(dá)式內(nèi)。4，在HTML標(biāo)簽內(nèi)使用表達(dá)式
handlebars表達(dá)式可以直接在嵌入到HTML標(biāo)簽內(nèi)。
<span class="{{if" enable="" 'enable'="" 'disable'}}="">enable or disable</span>if例子一致，就當(dāng)是復(fù)習(xí)吧=^=。handlebars中最常用的幾個(gè)條件表達(dá)式，自己作為小例子演示一遍肯定懂了，對(duì)于有點(diǎn)驚訝的開(kāi)發(fā)者甚至看一遍即可。非常的簡(jiǎn)單，可能后面還會(huì)有其他的條件判斷的表達(dá)式，后續(xù)會(huì)補(bǔ)上。
博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能又出入，不過(guò)影響不大?。?，如果你覺(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力！！
更多建議：