Ember.js ArrayProxy removeObserver() 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 removeObserver() method of ArrayProxy is a method that is used to remove the registered observer of the object. This method disconnects the key and observer.
Syntax:
this.object.removeObserver( key, target, method, sync );
Parameters:
- key: It is the from which the observer will remove.
- target: It is an object which is the owner of the key.
- method: It is the which is invoked as per observer command.
- sync: It specifies whether the observer is async or not.
Return type: Observable.
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 ArrayProxy from '@ember/object' ; import { computed } from '@ember/object' ; import Ember from 'ember' ; const Student = ArrayProxy.extend({ Changed: Ember.observer( 'marks' , function () { console.log(`Marks of ${ this .name} changed`); }), }); export default class StudentsRoute extends Route { student = Student.create({ name: 'Arun Verma' , class: 12, Branch: 'Commerce' , gender: 'M' , marks: 73, mobile: '837483783' , Roll_No: '1238372' , }) model() { return this .student; } setupController(controller, model) { super .setupController(controller, model); controller.set( 'student' , this .student); } } |
app/controllers/test1.js
Javascript
import Ember from 'ember' ; import EmberObject from '@ember/object' ; import { cacheFor, destroy } from '@ember/object' ; export default Ember.Controller.extend({ actions: { del() { let temp = this .student.removeObserver( 'marks' , this .student, 'Changed' ); console.log( 'Observer removed!!' ) }, Change() { this .student.set( 'marks' , this .student.get( 'marks' ) + 10); }, } }); |
app/templates/test1.hbs
HTML
{{page-title "ArrayProxy"}} < table > < h1 >Student's Details:</ h1 > < div >< b >Name:</ b > {{this.student.name}}</ div > < div >< b >Gender:</ b > {{this.student.gender}}</ div > < div >< b >Class:</ b > {{this.student.class}}</ div > < div >< b >Mobile:</ b > {{this.student.mobile}}</ div > < div >< b >Grade:</ b > {{this.student.Grade}}</ div > < div >< b >Marks:</ b > {{this.student.marks}}</ div > < div >< b >Branch:</ b > {{this.student.Branch}}</ div > </ table > < br />< br /> < input type = "button" id = "remove" value = "Remove Observer" {{action 'del'}} />< br />< br /> < input type = "button" id = "Change" value = "Change The Marks" {{action 'Change'}} /> {{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 { computed } from '@ember/object' ; import { tracked } from '@glimmer/tracking' ; import Ember from 'ember' ; import ArrayProxy from '@ember/object/proxy' ; const Employee = ArrayProxy.extend({ fullName: computed( 'firstName' , 'lastName' , function () { return this .get( 'firstName' ) + ' ' + this .get( 'lastName' ); }), change: Ember.observer( 'age' , function () { console.log(`Age is changed`); }), }); export default class DetailsRoute extends Route { value = 34; @tracked person = Employee.create({ firstName: 'Rohil' , lastName: 'Sahu' , mobile: '928393839' , age: 32, language: 'Hindi' , country: 'India' , gender: 'M' , zipCode: '9384983' , salary: 120000, }); model() { return this .person } setupController(controller, model) { super .setupController(controller, model); controller.set( 'person' , this .person); controller.set( 'value' , this .value); } } |
app/controllers/test2.js
Javascript
import Ember from 'ember' ; import EmberObject from '@ember/object' ; export default Ember.Controller.extend({ actions: { change(data) { this .person.set( 'age' , data); }, remove() { this .person.removeObserver( 'age' , this .person, 'change' ); console.log( 'Observer Removed!!!' ) } } }); |
app/templates/test2.hbs
HTML
{{page-title "ArrayProxy"}} < table > < h1 >Employee's Details: </ h1 > < div >< b >Name:</ b > {{this.person.fullName}}</ div > < div >< b >Gender:</ b > {{this.person.gender}}</ div > < div >< b >Country:</ b > {{this.person.country}}</ div > < div >< b >Salary:</ b > {{this.person.salary}}</ div > < div >< b >Zip Code:</ b > {{this.person.zipCode}}</ div > < div >< b >Language Speaks:</ b >{{this.person.language}}</ div > < div >< b >Mobile No.:</ b >{{this.person.mobile}}</ div > < div >< b >Age:</ b > {{this.person.age}}</ div > </ table > < br /> {{input value=this.value}} < br /> < input type = "button" id = "Change" value = "Change Age" {{action 'change'this.value}} >< br />< br /> < input type = "button" id = "remove" value = "Remove Observer" {{action 'remove'}} > {{outlet}} |
Output:
Reference: https://api.emberjs.com/ember/4.9/classes/ArrayProxy/methods/removeObserver?anchor=removeObserver
Contact Us