Ember.js ArrayProxy insertAt() 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 insertAt() method is used to insert an object at the specified index.
Syntax:
insertAt( index, object );
Parameters:
- index: It is the index at which place object will insert.
- object: It is an object which will insert.
Return Value: A receiver.
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/insertAt1.js
import Route from '@ember/routing/route' ; export default class ListRoute extends Route { list = [1, 2, 3, 5, 6, 7, 8, 9]; item; idx; model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'list' , this .list); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); } } |
app/controllers/insertAt1.js
import Ember from 'ember' ; import { clear, addObject, indexOf } from '@ember/array' ; export default Ember.Controller.extend({ actions: { insertItem(ind, item) { this .list.insertAt(ind, JSON.parse(item)); }, clearList() { this .list.clear(); }, getIndex(item) { let res = this .list.indexOf(JSON.parse(item)); res != -1 ? alert(`Index of ${item} is ${res}`) : alert(`list does not contains ${item}`); }, }, }); |
app/templates/insertAt1.hbs
{{page-title "insertAt" }} <h3>Here is a list of Items: </h3> <ul> {{ #each @model as |i|}} <li>{{i}}</li> {{/each}} </ul> <br /> <div> <label>Enter Item: </label> {{input value= this .item2}} </div> <div> <input type= "button" id= "first-index-item" value= "Get Index" {{action "getIndex" this .item2}} /> </div> <br /> <div> <label>Enter Index: </label> {{input value= this .item}} </div> <br /> <div> <label>Enter Item: </label> {{input value= this .item3}} </div> <div> <input type= "button" id= "insert-item" value= "Insert Item" {{action "insertItem" this .item this .item3}} /> </div> <br /> <input type= "button" id= "clear-items" value= "Clear" {{action "clearList" }} /> {{outlet}} |
Output: Visit localhost:4200/insertAt1 to view the output
Example 2: Type the following code to generate the route for this example:
ember generate route insertAt2
app/routes/insertAt2.js
import Route from '@ember/routing/route' ; export default class PartyRoute extends Route { partyItems = [ 'Oxygen' , 'Source Code' , 'Infine' , 'Tenet' , 'SpiderHead' , 'The Thing' , 'A Quiet Place' , 'The Invisible Man' , 'Looper' , 'Ad Astra' ]; temp = [ 'Shutter Island' , 'Matrix' , 'Avatar' , 'Fantastic Beast' , 'Avengers' , 'Fantastic four' , 'Hult' , 'Superman' , 'Spiderman' , 'The Batman' ]; item; idx; model() { return this .partyItems; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'partyItems' , this .partyItems); controller.set( 'item' , this .item); controller.set( 'idx' , this .idx); controller.set( 'temp' , this .temp); } } |
app/controllers/insertAt2.js
import Ember from 'ember' ; import { indexOf, pushObjects, insertAt } from '@ember/array' ; export default Ember.Controller.extend({ actions: { insertItem(ind, item) { this .partyItems.insertAt(ind, item); }, push_item(data) { this .partyItems.pushObjects(data); }, getItem(item) { let res = this .partyItems.indexOf(item); res != -1 ? alert(`Index of ${item} is ${res}`) : alert(`list does not contains ${item}`); }, }, }); |
app/templates/insertAt2.hbs
{{page-title "insertAt" }} <h3>Here is a list of items: </h3> <ul> {{ #each @model as |party|}} <li>{{party}}</li> {{/each}} </ul> <br /><br /> <div> <label>Enter Index: </label> {{input value= this .item}} </div> <br /> <div> <label>Enter Item: </label> {{input value= this .item2}} </div> <div> <input type= "button" id= "insert-item" value= "Insert Item" {{action "insertItem" this .item this .item2}} /> </div> <br /> <div> <label>Enter Item: </label> {{input value= this .item3}} </div> <div> <input type= "button" id= "contains-item" value= "Get Index" {{action "getItem" this .item3}} /> </div> <br /> <input type= "button" id= "contains-item" value= "Add Movies" {{action "push_item" this .temp}} /> {{outlet}} |
Output: Visit localhost:4200/insertAt2 to view the output
Reference: https://api.emberjs.com/ember/4.6/classes/ArrayProxy/methods/invoke?anchor=insertAt