EmberJS - Manejo de finalización de acciones y aprobación de argumentos

El componente puede manejar la finalización de la acción devolviendo una promesa y los argumentos se pueden pasar a un componente usando un asistente de acción.

Sintaxis

La acción se puede implementar como:

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //code here
      }
   }
});

Los argumentos se pueden pasar a un componente como:

{{component_name text = "text-here" action-helper = (action "action_name" "args")}}

Ejemplo

El ejemplo que se proporciona a continuación especifica cómo manejar la finalización de la acción y pasar argumentos en su aplicación. Cree un componente con el nombre ember-actions y abra el archivo de plantilla de componente ember-actions.js creado en app / components / con el siguiente código:

import Ember from 'ember';

export default Ember.Component.extend ({
   doubleClick: function() {
      this.toggleProperty('isEditing');
   },
   isEditing: false

});

Abra el archivo ember-actions.hbs creado en app / templates / components / e ingrese el siguiente código:

{{#if isEditing}}
   <p>Title: {{input value = title}}</p>
   <p>url: {{input value = url}}</p>
   <p>Double click on the save button to save information.</p>
   <button>Save</button>
{{else}}
   <p>Double click on the form to enter details:</p>
   <p>Title: {{title}}</p>  
   <p>url: {{url}}</p>
{{/if}}
{{yield}}

Cree el archivo application.hbs y agregue el siguiente código:

{{ember-actions}}
{{outlet}}

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Después de hacer doble clic en el formulario, se mostrará el formulario e ingresará los detalles en él. A continuación, haga doble clic en el botón Guardar para guardar los detalles -

Ahora verá los detalles guardados como se muestra en la captura de pantalla a continuación: