Ember.js EmberObject set() 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 set() method is used to set the provided key value to the object.
Syntax:
set( keyName, value );
Parameters:
- keyName: It is the name of the property whose value we want to set.
- value: It is the value of the key which we want to set.
Return Value: The object with the passed key value.
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 set1
app/routes/set1.js
Javascript
import Route from '@ember/routing/route' ; import EmberObject from '@ember/object' ; export default class WebsitesRoute extends Route { food = [ EmberObject.create({ food: 'apple' , isFruit: true , quant: 3, }), EmberObject.create({ food: 'Potato' , isFruit: false , quant: 4, }), EmberObject.create({ food: 'Banana' , isFruit: true , quant: 2, }), EmberObject.create({ food: 'Burgur' , isFruit: false , quant: 2, }), EmberObject.create({ food: 'Orange' , isFruit: true , quant: 7, }), ]; temp; model() { return this .food; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'food' , this .food); controller.set( 'temp' , this .temp); controller.set( 'food2' , this .food2); } } |
app/controllers/set1.js
Javascript
import Ember from 'ember' ; export default Ember.Controller.extend({ value: 0, actions: { remove_item(item) { this .food.set( '[]' , this .food.without ( this .food.findBy( 'food' , item))); }, list() { let ans = '' ; this .food.forEach((item) => ans += item.get( 'food' ) + '\n' ); alert(ans) }, increase() { this .food.forEach((item) => item.incrementProperty( 'quant' )); }, decrease() { this .food.forEach((item) => item.decrementProperty( 'quant' )); }, }, }); |
app/templates/set1.hbs
Javascript
{{page-title "set" }} <h3>List of Item in Buckets</h3> <table> <tr> <th> Food_Name </th> <th>Bucket </th> <th>Fruit </th> </tr> {{ #each @model as |website|}} <tr> <td>{{website.food}}</td> <td>{{website.quant}}</td> <td>{{website.isFruit}}</td> </tr> {{/each}} </table> <br /> <div> <label>Enter value: </label> {{input value= this .item}} </div> <input type= "button" id= "R-item" value= "Remove this item" {{action "remove_item" this .item}} /> <br /><br /> <input type= "button" id= "list-items" value= "List All Items" {{action "list" }} /> <br /><br /> <input type= "button" id= "increase-property" value= "Increase Quantity" {{action "increase" }} /> <br /><br /> <input type= "button" id= "decrease-property" value= "decrease Quantity" {{action "decrease" }} /> {{outlet}} |
Output: Visit localhost:4200/set1 to view the output.
Example 2: Type the following code to generate the route for this example:
ember generate route set2
app/routes/set2.js
Javascript
import Route from '@ember/routing/route' ; import EmberObject from '@ember/object' ; import { } from '@ember/array' ; export default class FruitsRoute extends Route { students = [ EmberObject.create({ name: 'Rahul' , Class: 11, marks: 75 }), EmberObject.create({ name: 'Sam' , Class: 12, marks: 59 }), EmberObject.create({ name: 'David' , Class: 11, marks: 67 }), EmberObject.create({ name: 'Druv' , Class: 12, marks: 44 }), EmberObject.create({ name: 'Mahan' , Class: 12, marks: 87 }), EmberObject.create({ name: 'Ram' , Class: 11, marks: 71 }), EmberObject.create({ name: 'Dadu' , Class: 12, marks: 58 }) ]; model() { return this .students; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'students' , this .students); } } |
app/controllers/set2.js
Javascript
import Ember from "ember" ; import { isAny, isEvery } from "@ember/array" ; export default Ember.Controller.extend({ actions: { increase(data) { this .students.forEach((item) => item.incrementProperty( 'marks' , JSON.parse(data))); }, decrease(data) { this .students.forEach((item) => item.decrementProperty( 'marks' , JSON.parse(data))); }, remove(item) { this .students.set( '[]' , this .students.without( this .students.findBy ( 'name' , item))); }, show_first() { let ans = this .students.get( 'firstObject' ); alert(ans.name) }, show_last() { let ans = this .students.get( 'lastObject' ); alert(ans.name) }, }, }); |
app/templates/set2.hbs
Javascript
{{page-title "set" }} <h3>Students List: </h3> <table> <tr> <th>Name</th> <th>Class</th> <th>Marks</th> </tr> {{ #each @model as |detail|}} <tr> <td>{{detail.name}}</td> <td>{{detail.Class}}</td> <td>{{detail.marks}}</td> </tr> {{/each}} </table> <br /> <div> <label>Enter value: </label> {{input value= this .item}} </div> <input type= "button" id= "increase-marks" value= "Increase All marks by Value" {{action "increase" this .item}} /> <br /><br /> <div> <label>Enter value: </label> {{input value= this .item2}} </div> <input type= "button" id= "decrease-marks" value= "decrease All marks by Value" {{action "decrease" this .item2}} /> <br /><br /> <div> <label>Enter Name: </label> {{input value= this .item3}} </div> <input type= "button" id= "remove-student" value= "Remove Student" {{action "remove" this .item3}} /> <br /><br /> <input type= "button" id= "first-student" value= "Show First Student in list" {{action "show_first" }} /> <br /><br /> <input type= "button" id= "last-student" value= "Show Last Student in list" {{action "show_last" }} /> {{outlet}} |
Output: Visit localhost:4200/set2 to view the output.
Reference: https://api.emberjs.com/ember/4.4/classes/EmberObject/methods/get?anchor=set