Ember.js Ember.Templates.helpers concat() Method
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The concat() Method is used to concatenate the given arguments into a string.
Syntax:
{{ some-component StrArg=(concat arg1 arg2... ) }}
Parameters:
- StrArg: It is the string that holds the concatenated argument.
- arg1: It is the first argument.
- arg2: It is the second argument.
Steps to Install and Run Ember.js:
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember server
Example 1: Type the following code to generate the route for this example:
ember generate route concat1
app/routes/concat1.js
Javascript
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
HTML
{{@greet}} to w3wiki site< br /> |
app/templates/concat1.hbs
HTML
{{#each @model as |temp|}} {{compact greet=(concat "Welcome " temp)}} {{/each}} |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route concat2
app/routes/concat2.js
Javascript
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
HTML
< li >{{@name}}</ li > |
app/templates/concat2.hbs
HTML
< h1 >List of Students : </ h1 > {{#each this.student as |stu| }} {{compact2 name=(concat stu.FName stu.LName)}} {{/each}} |
Output:
Reference: https://api.emberjs.com/ember/4.4/classes/Ember.Templates.helpers/methods/concat?anchor=concat
Contact Us