Ember.js Ember.Templates.helpers each() 方法
Ember.js是一个用于开发大型客户端Web应用程序的开源JavaScript框架,基于模型-视图-控制器(MVC)架构。Ember.js是最广泛使用的前端应用程序框架之一。它旨在加快开发速度和提高生产力。目前,它被许多网站使用,包括Square、Discourse、Groupon、LinkedIn、Live Nation、Twitch和Chipotle。
each 用于在集合中循环元素。
语法:
{{ #each Collection as |alias| }}
参数:
- Collection: 它是我们迭代的集合的名称。
安装和运行Ember.js的步骤:
步骤1: 要运行以下示例,您需要先拥有一个ember项目。要创建一个项目,首先需要安装ember-cli。在终端中输入以下代码:
npm install ember-cli
步骤2: 现在您可以输入下面的代码来创建项目:
ember new <project-name> --lang en
启动服务器,请输入:
ember server
示例1: 输入以下代码以生成此示例的路径:
ember generate route each1
app/routes/each1.js
import Route from '@ember/routing/route';
export default class PartyRoute extends Route {
person = [
'Aman',
'Arabh',
'Sonu',
'Saurabh',
'Satyam',
];
item;
idx;
len;
model() {
return this.person;
}
setupController(controller, model) {
super.setupController(controller, model);
controller.set('person', this.person);
controller.set('item', this.item);
controller.set('idx', this.idx);
controller.set('len', this.len);
}
}
app/components/compact.hbs
{{@greet}} to GeeksforGeeks site<br/>
app/templates/each1.hbs
{{#each @model as |temp|}}
{{compact greet=(concat "Welcome " temp)}}
{{/each}}
输出:
示例2: 输入以下代码生成此示例的路由:
ember generate route each2
app/routes/each2.js
import Route from '@ember/routing/route';
export default class WebsitesRoute extends Route {
student = [
{
FName: 'Arbha ',
LName: 'Singh',
},
{
FName: 'Sam ',
LName: 'Snehil',
},
{
FName: 'Pokhu ',
LName: 'Agrawal',
},
{
FName: 'Yogi ',
LName: 'Sahu',
},
];
temp;
model() {
return this.student;
}
setupController(controller, model) {
super.setupController(controller, model);
controller.set('student', this.student);
controller.set('temp', this.temp);
controller.set('temp2', this.temp2);
}
}
app/components/compact2.hbs
<li>{{@name}}</li>
app/templates/each2.hbs
<h1>List of Students : </h1>
{{#each this.student as |stu| }}
{{compact2 name=(concat stu.FName stu.LName)}}
{{/each}}
输出:
参考: https://api.emberjs.com/ember/4.4/classes/Ember.Templates.helpers/methods/concat?anchor=each