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