Ember.js ObjectProxy content Property
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 content Property is used to forward the object property.
Syntax:
ObjectProxy.create({content: value})
Properties:
- value: It is a value that is assigned to content.
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 test1
app/routes/test1.js
Javascript
import Route from '@ember/routing/route' ; import EmberObject from '@ember/object' ; import Ember from 'ember' ; let List = Ember.ObjectProxy.extend({}); export default class FruitsRoute extends Route { temp = [ 'python' , 'javascript' , 'java' , 'Php' , 'Django' , 'Angular' , 'c++' , 'c' , ]; list = List.create({ content: this .temp }); item2; item3; model() { return this .list; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'item3' , this .item3); controller.set( 'item2' , this .item2); controller.set( 'list' , this .list); controller.set( 'temp' , this .temp); } } |
app/controllers/test1.js
Javascript
import Ember from 'ember' ; import { addObject, isAny, isEvery } from '@ember/array' ; import EmberObject from '@ember/object' ; export default Ember.Controller.extend({ actions: { print() { let temp = this .list.content; alert(temp.join( '\n' )); }, find(data) { alert( this .list.objectAtContent(data)); }, }, }); |
app/templates/test1.hbs
HTML
{{page-title "Example"}} < h3 >Here is a list of Languages: </ h3 > < table > {{#each @model as |item|}} < tr > < td >{{item}}</ td > </ tr > {{/each}} </ table > < br /> < div > < label >Enter Index: </ label > {{input value=this.item3}} </ div > < br /> < div > < input type = "button" id = "print-item" value = "Print items At" {{action "find" this.item3}} /> </ div > < br />< br /> < div > < input type = "button" id = "print-item" value = "Print All items" {{action "print" }} /> </ div > {{outlet}} |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route test2
app/routes/test2.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/test2.js
Javascript
import Controller from '@ember/controller' ; import { action } from '@ember/object' ; export default class List2Controller extends Controller { @action print() { let temp = this .list.content; alert(temp.join( '\n' )); } @action show(data) { alert( this .list.objectAtContent(data)); } } |
app/templates/test2.hbs
HTML
{{page-title "Example"}} < h3 >Here is a list of eatables: </ h3 > < table > {{#each @model as |item|}} < tr > < td >{{item}}</ td > </ tr > {{/each}} </ table > < br /> < div > < label >Enter Index: </ label > {{input value=this.item3}} </ div > < br /> < div > < input type = "button" id = "print-item" value = "Item At index" {{action "show" this.item3}} /> </ div > < br />< br /> < div > < input type = "button" id = "print-item" value = "Print All items" {{action "print" }} /> </ div > {{outlet}} |
Output:
Reference: https://api.emberjs.com/ember/4.6/classes/ObjectProxy/properties/content?anchor=content
Contact Us