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 pushObject() method is used to push object into an array.
Syntax:
pushObject(obj)
Parameters:
- obj (Object): Object to push
Returns: Object that was passed as a parameter
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 notepad
app/routes/notepad.js
import Route from '@ember/routing/route' ;
export default class NotepadRoute extends Route {
item;
items = [ 'Bread' , 'Facewash' ];
model() {
return this .items;
}
setupController(controller, model) {
this ._super(controller, model);
controller.set( 'items' , this .items);
}
} |
app/controllers/notepad.js
import Ember from 'ember' ;
import { pushObject } from '@ember/array' ;
export default Ember.Controller.extend({
actions: {
addItem(item) {
console.log(item);
this .items.pushObject(item);
}
}
}) |
app/template/notepad.hbs
{{page-title "Notepad"}} < h2 >Your Items</ 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 />
< ul >
{{#each @model as |i|}}
< li >{{i}}</ li >
{{/each}}
</ ul >
{{outlet}} |
Output: Visit localhost:4200/notepad 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 { classify, w } from '@ember/string' ;
import { pushObject } from '@ember/array' ;
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 = [];
this .name = w( this .name);
this .num = w( this .num)
for (let i = 0; i< this .name.length; i++) {
let obj = new Object();
obj[ 'name' ] = classify( this .name[i]);
obj[ 'num' ] = this .num[i];
this .languages.pushObject(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/4.4/classes/MutableArray/methods