Ember.js ArrayProxy replaceContent() 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. 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 replaceContent() Method of ArrayProxy is a method that is used to replace the specified objects on the content array. This method is only called if the content is not null.
Syntax:
this.object.repaceContent( idx, amt, objects );
Parameters:
- idx: It is the starting index from which content replacing starts.
- amt: It is the amount till where content will be replaced.
- objects: It is the object which is placed in place.
Return type: The return type of this method is void.
Steps to Install and Run Ember.js:
Step 1: 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
Step 2: 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 temp1
app/routes/temp1.js
Javascript
import Route from '@ember/routing/route' ; import { A } from '@ember/array' ; import ArrayProxy from '@ember/array/proxy' ; export default class List2Route extends Route { list = ArrayProxy.create({ content: A([ 'Oxygen' , 'Source Code' , 'Infine' , 'Tenet' , 'SpiderHead' , 'The Thing' , 'A Quiet Place' , 'The Invisible Man' , 'Looper' , 'Ad Astra' , ]) }); model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'list' , this .list); } } |
app/controllers/temp1.js
Javascript
import Controller from '@ember/controller' ; import { action } from '@ember/object' ; export default class List2Controller extends Controller { @action rotate(data) { let temp = this .list.content; this .list.replaceContent(0, temp.length, temp.reverse()); } } |
app/templates/temp1.hbs
HTML
{{page-title "ArrayProxy"}} < h3 >Here is a list of Movies: </ h3 > < table > {{#each @model as |item|}} < tr > < td > < li >{{item}}</ li > </ td > </ tr > {{/each}} </ table > < br /> < br /> < div > < input type = "button" id = "rotate-item" value = "Rotate the Array" {{action "rotate" }} /> </ div > {{outlet}} |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route temp2
app/routes/temp2.js
Javascript
import Route from '@ember/routing/route' ; import { A } from '@ember/array' ; import ArrayProxy from '@ember/array/proxy' ; export default class List2Route extends Route { list = ArrayProxy.create({ content: A([ 'python' , 'javascript' , 'java' , 'Php' , 'Angular' , 'c++' , 'Django' , 'c' , ]) }); model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'list' , this .list); } } |
app/controllers/temp2.js
Javascript
import Controller from '@ember/controller' ; import { action } from '@ember/object' ; export default class List2Controller extends Controller { list2 = [ 'SQL' , 'Go' , 'c#' , 'Kotlin' , 'R' , 'Swift' , 'Rust' , 'Ruby' , ] @action show(data) { this .list.replaceContent(0, data, this .list2.slice(0, data)); } } |
app/templates/temp2.hbs
HTML
{{page-title "ArrayProxy"}} < h3 >Here is a list of languages: </ h3 > < table > {{#each @model as |item|}} < tr > < li >{{item}}</ li > </ tr > {{/each}} </ table > < br /> < div > < label >Enter Index: </ label > {{input value=this.item3}} </ div > < br /> < div > < input type = "button" id = "change-item" value = "Change till index" {{action "show" this.item3}} /> </ div > {{outlet}} |
Output:
Reference: https://api.emberjs.com/ember/4.9/classes/ArrayProxy/methods/replaceContent?anchor=replaceContent
Contact Us