W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
采用與上一篇文章一樣的方法,使用 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)看前面的文章。
有些情況我們可能需要獲取數(shù)組的下標(biāo),比如有些時(shí)候可能會(huì)下標(biāo)作為數(shù)據(jù)的序號(hào)。請(qǐng)看下面的演示:
{{! 遍歷在route里設(shè)置的對(duì)象數(shù)組 }}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: