Ember.js 入門指南——handlebars遍歷標籤

本系列文章所有從（http://ibeginner.sinaapp.com/）遷移過來，歡迎訪問原網站。

採用與上一篇文章同樣的方法，使用 ember generate route handlebars-each 命令建立了一個路由文件和一個對應的模板文件。

       這一篇將爲你介紹遍歷標籤，數組的遍歷幾乎在任何的經常使用的開發語言中都能看到，也是使用很是普遍的一個功能。下面我將爲你們介紹handlebars的遍歷標籤，其使用方式與EL表達式幾乎是同樣的。我想你看一遍下來確定也能明白了……廢話少說，下面直接上演示代碼吧！！

//  app/routes/handlebars.js
 
 
import Ember from 'ember';
 
/**
 * 定義一個用於測試的對象數組
 */
export default Ember.Route.extend({
       //  重寫model回調函數，初始化測試數據
    model: function() {
              return [
                     Ember.Object.create({ name: 'chen', age: 25}),
                     Ember.Object.create({ name: 'i2cao.xyz', age: 0.2}),
                     Ember.Object.create({ name: 'ibeginner.sinaapp.com', age: 1}),
                     Ember.Object.create({ name: 'ubuntuvim.xyz', age: 3})
              ];
       }
});

如上述所示，在route裏構建了一個用於測試的對象數組，每一個對象有2個屬性（name，age）。

下面是顯示數據的template：

<!-- // app/templates/handlebars.hbs -->
 
{{! 遍歷在route裏設置的對象數組 }}
<ul>
       {{#each model as |item|}}
              <li>Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
       {{/each}}
</ul>

有沒有似曾類似的感受呢！！跟EL表達式的forEach標籤幾乎是同樣的。不出意外你應該能夠看到以下的結果。

提醒：記得此時運行的URL是剛剛新建的route。

操做數組的時候注意使用官方建議的方法（如，新增使用pushObject而不是push），請看前面的文章。

1，訪問數組下標

有些狀況咱們可能須要獲取數組的下標，好比有些時候可能會下標做爲數據的序號。請看下面的演示：

<!-- // app/templates/handlebars.hbs -->
 
{{! 遍歷在route裏設置的對象數組 }}
<ul
       {{#each model as |item index|}}
              <li>{{index}} Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
       {{/each}}
</ul>

不過這個下標是從0開始的，且你還不能想jstl中的forEach標籤能夠這樣寫{{index+1}}，handlebars不容許這麼寫！暫時還不知道有沒有相似的解決辦法……

2，空數組處理

在each標籤內還可使用{{else}}，當數組爲空的時候就會執行else代碼塊。

{{! 空數組處理，若是從route返回的model爲空，則會執行else代碼塊的代碼 }}
{{#each model as |item|}}
       Hello, {{item.name}}
{{else}}
       Sorry, nobody is here.
{{/each}}

爲了測試效果，請把app/routes/handlebars.js的return語句改爲「return []」。此時返回到模板上的是一個空數組，結果也和預期的一致，頁面顯示的是」Sorry, nobody is here.」。

 

       上述的內容就是handlebars的each遍歷使用實例。應該也是沒什麼難度的……