Ember.js String dasherize() Method
Last Updated :
05 Jul, 2022
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks since 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 dasherize() method is used to produce a dasherized version of the given string.
Syntax:
dasherize(str)
Parameters:
- str(string): The string to dasherize.
Return Value: The dasherized string.
Creating Application: 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
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 serve
Example 1: Type the following code to generate the route for this example:
ember generate route richest-people
app/routes/richest-people.js
import Route from '@ember/routing/route' ;
import { dasherize } from '@ember/string' ;
export default class RichestPeopleRoute extends Route {
richestPeople = [
'elon Musk' ,
'bernard Arnault and family' ,
'jeff Bezos' ,
'Bill gates' ,
'gautam adani and family' ,
'Larry Page' ,
'Warren Buffet' ,
'larryEllison' ,
'mukesh ambani' ,
'sergeyBrin' ,
];
model() {
return this .richestPeople.map(dasherize);
}
}
|
app/template/richest-people.hbs
{{page-title "Richest People"}}
< h2 >Top 10 Richest People in the World</ h2 >
< ul >
{{#each @model as |rich-person|}}
< li >{{rich-person}}</ li >
{{/each}}
</ ul >
{{outlet}}
|
Output: Visit localhost:4200/richest-people to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route languages
app/routes/languages.js
import Route from '@ember/routing/route' ;
import { dasherize } from '@ember/string' ;
export default class LanguagesRoute extends Route {
name = [ 'mandarin Chinese' , 'spanish' , 'english' ,
'Hindi' , 'bengali' , 'Portuguese' , 'russian' ,
'japanese' , 'western_punjabi' , 'yueChinese' ];
num = [929.0, 474.7, 372.9, 343.9, 233.7, 232.4,
154.0, 125.3, 92.7, 85.2];
languages = [];
initLanguages() {
this .languages = [];
for (let i = 0; i< this .name.length; i++) {
let obj = new Object();
obj[ 'name' ] = dasherize( this .name[i]);
obj[ 'num' ] = this .num[i];
this .languages.push(obj);
}
}
model() {
this .initLanguages();
return this .languages;
}
}
|
app/template/languages.hbs
{{page-title "Languages"}}
< h2 >Most Spoken Languages in the World</ h2 >
< table style = "border: 2px solid black;padding: 30px;" >
< tr >
< th >Language</ th >
< th >Native Speakers (millions)</ th >
</ tr >
{{#each @model as |language|}}
< tr >
< td >{{language.name}}</ td >
< td >{{language.num}}</ td >
</ tr >
{{/each}}
</ table >
{{outlet}}
|
Output: Visit localhost:4200/languages to view the output
Reference: https://api.emberjs.com/ember/release/classes/String
Share your thoughts in the comments
Please Login to comment...