Ember.js String underscore() 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 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 underscore() method is used to produce an underscored version of the given string.

Syntax:

underscore(str)

Parameters:

• str(string): The string to underscore.

Return Value: The underscored string.

To run the following examples you will need to have a 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 { underscore } 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',
    'larry Ellison',
    'mukesh ambani',
    'sergey brin',
  ];
  model() {
    return this.richestPeople.map(underscore);
  }
}

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 { underscore } 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'] = underscore(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