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 length property is used to retrieve the length of the array.
Syntax:
array.length
Return Value: The length of the array.
Installation Steps: 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
import Route from '@ember/routing/route' ;
import { sortBy } from '@ember/array' ;
export default class RichestPeopleRoute extends Route {
richestPeople = [
{ 'name' : 'mukesh ambani' , 'net-worth' : 90.7 },
{ 'name' : 'jeff Bezos' , 'net-worth' : 148.1 },
{ 'name' : 'Warren Buffet' , 'net-worth' : 99.3 },
{ 'name' : 'Bill gates' , 'net-worth' : 104.7 },
{ 'name' : 'elon Musk' , 'net-worth' : 253.4 },
{ 'name' : 'gautam adani and family' , 'net-worth' : 115.8 },
{ 'name' : 'Larry Page' , 'net-worth' : 93.4 },
{ 'name' : 'larryEllison' , 'net-worth' : 103.3 },
{ 'name' : 'sergeyBrin' , 'net-worth' : 89.9 },
{ 'name' : 'bernard Arnault and family' , 'net-worth' : 157.1 },
];
firstPerson;
lastPerson;
idx = 5;
randomPerson;
num;
model() {
this .richestPeople = this .richestPeople.sortBy( 'net-worth' );
this .randomPerson = this .richestPeople[ this .idx - 1];
return this .richestPeople;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( 'idx' , this .idx);
controller.set( 'firstPerson' , this .richestPeople.firstObject);
controller.set( 'lastPerson' , this .richestPeople.lastObject);
controller.set( 'randomPerson' , this .randomPerson);
controller.set( 'richestPeople' , this .richestPeople);
controller.set( 'num' , this .richestPeople.length);
}
} |
import Ember from 'ember' ;
export default Ember.Controller.extend({
actions: {
setIdx(n) {
this .idx = parseInt(n);
this .set( 'randomPerson' ,
this .richestPeople[ this .idx - 1]);
}
}
}) |
{{page-title "Richest People"}} < div >
< label >Enter Value (1-{{this.num}}):</ label >
{{input value=this.idx}}
</ div >
< div >
< input type = "button" id = "fetch" value = "Fetch" {{action 'setIdx' this.idx}} />
</ div >
< br >
< div >First Person on the List: {{this.firstPerson.name}}
${{this.firstPerson.net-worth}} B
</ div >
< br >
< div >Last Person on the List: {{this.lastPerson.name}}
${{this.lastPerson.net-worth}} B
</ div >
< br >
< div >Random Person on the List: {{this.randomPerson.name}}
${{this.randomPerson.net-worth}} B
</ div >
{{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 notepad
import Route from '@ember/routing/route' ;
export default class NotepadRoute extends Route {
items = [];
empty = true ;
item;
firstItem;
lastItem;
randomItem;
num;
model() {
this .firstItem = this .items.firstObject;
this .lastItem = this .items.lastObject;
this .num = this .items.length;
return this .items;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( 'items' , this .items);
controller.set( 'empty' , this .empty);
controller.set( 'firstItem' , this .firstItem);
controller.set( 'lastItem' , this .lastItem);
controller.set( 'randomItem' , this .randomItem);
controller.set( 'num' , this .num);
}
} |
import Ember from 'ember' ;
import { pushObject } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
addItem(item) {
this .items.pushObject(item);
this .set( 'empty' , false );
this .set( 'firstItem' , this .items.firstObject);
this .set( 'lastItem' , this .items.lastObject);
this .set( 'num' , this .items.length);
this .set( 'randomItem' , this .items[
Math.floor(Math.random() * this .num)]);
}
}
}) |
{{page-title "Notepad" }}
<h2>Notepad</h2> <div> <label>Enter Item: </label>
{{input value= this .item}}
</div> <div> <input type= "button"
id= "add-item" value= "Add Item" {{action 'addItem' this .item}} />
</div> <br /><br /> {{ #if this.empty}}
<div>The list is empty!</div> {{ else }}
<div> <div>First Item: {{ this .firstItem}}</div>
<div>Latest Item: {{ this .lastItem}}</div>
<div>Random Item: {{ this .randomItem}}</div>
<div>Number of Items: {{ this .num}}</div>
</div> {{/ if }}
<br /><br /> {{outlet}} |
Output: Visit localhost:4200/notepad to view the output
Reference: https://api.emberjs.com/ember/4.4/classes/MutableArray/properties