Ember handlebars遍歷標簽

采用與上一篇文章一樣的方法，使用 ember generate route handlebars-each 命令創(chuàng)建了一個路由文件和一個對應(yīng)的模板文件。 這一篇將為你介紹遍歷標簽，數(shù)組的遍歷幾乎在任何的常用的開發(fā)語言中都能看到，也是使用非常廣泛的一個功能。下面我將為大家介紹handlebars的遍歷標簽，其使用方式與EL表達式幾乎是一樣的。我想你看一遍下來肯定也能明白了……廢話少說，下面直接上演示代碼吧?。?/p>

//  app/routes/handlebars.js
import Ember from 'ember';
/**
 * 定義一個用于測試的對象數(shù)組
 */
export default Ember.Route.extend({
    //  重寫model回調(diào)函數(shù)，初始化測試數(shù)據(jù)
    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類里構(gòu)建了一個用于測試的對象數(shù)組，每個對象有2個屬性（name，age）。 下面是顯示數(shù)據(jù)的模板：

{{! 遍歷在route里設(shè)置的對象數(shù)組 }}
<ul>
    {{#each model as |item|}}
        <li>Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
    {{/each}}
</ul>

有沒有似曾相似的感覺呢??！跟EL表達式的forEach標簽幾乎是一樣的。不出意外你應(yīng)該可以看到如下的結(jié)果。

提醒：記得此時運行的URL是剛剛新建的route。 操作數(shù)組的時候注意使用官方建議的方法（如，新增使用pushObject而不是push），請看前面的文章。

1，訪問數(shù)組下標

有些情況我們可能需要獲取數(shù)組的下標，比如有些時候可能會下標作為數(shù)據(jù)的序號。請看下面的演示：

{{! 遍歷在route里設(shè)置的對象數(shù)組 }}