Ember.js ArrayProxy init() Method
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. 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 init() method is called when objects are instantiated.
Syntax:
init(){ // method algorithm };
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 insertAt1
app/routes/init1.js
import Route from '@ember/routing/route' ; export default class FruitsRoute extends Route { fruits = [ { 'name' : 'Lady Finger' , 'isFruit' : false , 'color' : 'green' , 'quant' : 2, }, { 'name' : 'Brinjal' , 'isFruit' : false , 'color' : 'purple' , 'quant' : 2, }, { 'name' : 'Apple' , 'isFruit' : true , 'color' : 'red' , 'quant' : 5, }, { 'name' : 'Grapes' , 'isFruit' : true , 'color' : 'green' , 'quant' : 4, }, { 'name' : 'Mango' , 'isFruit' : true , 'color' : 'yellow' , 'quant' : 3, }, { 'name' : 'Watermelon' , 'isFruit' : true , 'color' : 'red' , 'quant' : 2, }, { 'name' : 'Orange' , 'isFruit' : true , 'color' : 'orange' , 'quant' : 2, } ]; item2; item3; init() { this ._super(...arguments); alert( "this is initalier" ); } model() { return this .fruits; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'fruits' , this .fruits); controller.set( 'item1' , this .item1); controller.set( 'item2' , this .item2); controller.set( 'item3' , this .item3); } } |
app/controllers/init1.js
import Ember from "ember" ; export default Ember.Controller.extend({ age: 55, actions: { print_Color() { let temp = '' ; let foo = this .fruits.getEach( 'name' ); let too = this .fruits.getEach( 'color' ); for (let i = 0; i < foo.length; i++) temp += foo[i] + '\n' ; alert(temp ? temp : 'No item in list' ) }, remove() { this .fruits.clear(); }, }, }); |
app/templates/init1.hbs
{{page-title "Init" }} <h3>Here is a list of eatables: </h3> <table> <tr> <th>Name</th> <th>Fruit</th> <th>Color</th> <th>Quantity</th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td>{{detail.isFruit}}</td> <td>{{detail.color}}</td> <td>{{detail.quant}}</td> </tr> {{/each}} </table> <br /><br /> <div> <input type= "button" id= "addFruit" value= "Find All the Colors of Fruit" {{action "print_Color" }} /> </div> <br /> <div> <input type= "button" id= "removeFruit" value= "Clear" {{action "remove" }} /> </div> {{outlet}} |
Output: Visit localhost:4200/init1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route init2
app/routes/init2.js
import Route from '@ember/routing/route' ; export default class FruitsRoute extends Route { fruits = [ { 'name' : 'Lady Finger' , 'isFruit' : false , 'color' : 'green' }, { 'name' : 'Brinjal' , 'isFruit' : false , 'color' : 'purple' }, { 'name' : 'Apple' , 'isFruit' : true , 'color' : 'red' }, { 'name' : 'Grapes' , 'isFruit' : true , 'color' : 'green' }, { 'name' : 'Mango' , 'isFruit' : true , 'color' : 'yellow' }, { 'name' : 'Watermelon' , 'isFruit' : true , 'color' : 'red' }, { 'name' : 'Orange' , 'isFruit' : true , 'color' : 'orange' } ]; item2; item3; model() { return this .fruits; } setupController(controller,model) { super .setupController(controller, model); controller.set( 'fruits' , this .fruits); controller.set( 'item1' , this .item1); controller.set( 'item2' , this .item2); controller.set( 'item3' , this .item3); } } |
app/controllers/init2.js
import Ember from "ember" ; import { addObject, isAny, isEvery } from "@ember/array" ; import EmberObject from '@ember/object' ; const Fruit = EmberObject.extend({ init() { alert(`Name is ${ this .get( 'name' )}`); } }); export default Ember.Controller.extend({ actions: { print_Color() { let temp = '' ; this .fruits.forEach((item) => temp += `${item.name} is ${item.color} color` + '\n' ); alert(temp ? temp : 'No item in list' ) }, remove() { this .fruits.clear(); }, insertItem(data, data1, data2) { let temp = Fruit.create({ name: data, isFruit: data1, color: data2 }); this .fruits.addObject(temp); } }, }); |
app/templates/init2.hbs
{{page-title "Init" }} <h3>Here is a list of eatables: </h3> <table> <tr> <th>Name</th> <th>Fruit</th> <th>Color</th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td>{{detail.isFruit}}</td> <td>{{detail.color}}</td> </tr> {{/each}} </table> <br /><br /> <div> <input type= "button" id= "addFruit" value= "Find All the Colors of Fruit" {{action "print_Color" }} /> </div> <br /><br /> <div> <label>Enter Fruit Name: </label> {{input value= this .item1}} </div><br /> <div> <label>Item is Fruit: </label> {{input value= this .item2}} </div><br /> <div> <label>Enter Fruit color: </label> {{input value= this .item3}} </div><br /> <div> <input type= "button" id= "insert-item" value= "Insert Fruit" {{action "insertItem" this .item1 this .item2 this .item3}} /> </div> {{outlet}} |
Output: Visit localhost:4200/init2 to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/ArrayProxy/methods/invoke?anchor=init