Ember handlebars遍歷標(biāo)簽

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

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

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

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

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

1，訪問(wèn)數(shù)組下標(biāo)

有些情況我們可能需要獲取數(shù)組的下標(biāo)，比如有些時(shí)候可能會(huì)下標(biāo)作為數(shù)據(jù)的序號(hào)。請(qǐng)看下面的演示：

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