Ember.js Ember.Templates.helpers concat() 方法
Ember.js是一个开源的JavaScript框架,用于开发大型的客户端Web应用程序,该框架基于Model-View-Controller(MVC)架构。Ember.js是最广泛使用的前端应用框架之一,旨在加快开发速度和提高生产力。目前,许多网站都使用了Ember.js,包括Square、Discourse、Groupon、LinkedIn、Live Nation、Twitch和Chipotle等。
concat() 方法用于将给定的参数连接成一个字符串。
语法:
{{ some-component StrArg=(concat arg1 arg2... ) }}
参数:
- StrArg: 这是保存连接参数的字符串。
- arg1: 这是第一个参数。
- arg2: 这是第二个参数。
安装并运行Ember.js的步骤:
步骤1: 要运行以下示例,您需要先有一个Ember项目。 要创建一个项目,您首先需要安装ember-cli。 在终端中写入以下代码:
npm install ember-cli
步骤2: 现在您可以通过键入以下代码来创建项目:
ember new <project-name> --lang en
要启动服务器,请键入:
ember server
示例1: 输入以下代码以生成该示例的路由:
ember generate route concat1
app/routes/concat1.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/component/compact.hbs
{{@greet}} to GeeksforGeeks site<br/>
app/templates/concat1.hbs
{{#each @model as |temp|}}
{{compact greet=(concat "Welcome " temp)}}
{{/each}}
输出:
示例2: 输入以下代码以生成此示例的路由:
ember generate route concat2
app/routes/concat2.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/component/compact2.hbs
<li>{{@name}}</li>
app/templates/concat2.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=concat