EmberJS - Observadores

El observador observa la propiedad, como las propiedades calculadas, y actualiza el texto de la propiedad calculada. Se activa cuando el texto se actualiza o cambia.

Sintaxis

funName1: Ember.computed(function() {
   //code here
}),

funName1: Ember.observer(function() {
   //code here
});

var varname = ClassName.create({
   //code here
});

La siguiente tabla enumera las propiedades de un observador:

S.No.	Descripción de propiedad
1	Observadores y asincronía Los observadores en un Ember.js están actualmente sincrónicos.
2	Declarando al observador Declarar un observador sin las extensiones del prototipo y fuera de las definiciones de clase.

Ejemplo

El siguiente ejemplo muestra cómo actualizar el texto de la propiedad calculada utilizando observer:

import Ember from 'ember';

export default function() {
   var Person = Ember.Object.extend ({
      Name: null,
      
      //Defining the Details1 and Details2 computed property function
      Details1: Ember.computed('Name', function() {
         
         //get the Name value
         var Name = this.get('Name');
         //return the Name value
         return Name;
      }),

      Details2: Ember.observer('Details1', function() {
         this.set('Name','Steve Waugh');
      })
   });

   //initializing the Person details
   var person = Person.create ({
      //initial value of Name varialble
      Name: 'Mark Waugh'
   });

   //updating the value for 'firstName' using set() method
   document.write('<strong>The updated name : </strong>' +person.get('Details1'));
}

Ahora abra el archivo app.js y agregue la siguiente línea en la parte superior del archivo:

import observers from './observers';

Donde, observadores es un nombre del archivo especificado como "observers.js" y creado en la carpeta "app". Ahora, llame a los "observadores" heredados en la parte inferior, antes de la exportación. Ejecuta la función de observadores que se crea en elobservers.js archivo -

observers();

Salida

Ejecute el servidor ember y recibirá el siguiente resultado:

↰ Previous page