Ember handlebars遍歷標(biāo)簽

2018-01-06 17:12 更新

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

//  app/routes/handlebars.js
import Ember from 'ember';
/**
 * 定義一個(gè)用于測(cè)試的對(duì)象數(shù)組
 */
export default Ember.Route.extend({
    //  重寫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類里構(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>

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

run result

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

1,訪問數(shù)組下標(biāo)

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






{{! 遍歷在route里設(shè)置的對(duì)象數(shù)組 }}
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)