EmberJS - Gestion de l'achèvement des actions et de la transmission des arguments

Le composant peut gérer l'achèvement de l'action en renvoyant une promesse et des arguments peuvent être passés à un composant à l'aide d'un assistant d'action.

Syntaxe

L'action peut être mise en œuvre comme -

import Ember from 'ember';

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

Les arguments peuvent être passés à un composant comme -

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

Exemple

L'exemple ci-dessous spécifie la gestion de l'achèvement des actions et le passage des arguments dans votre application. Créez un composant avec le nom ember-actions et ouvrez le fichier de modèle de composant ember-actions.js créé sous app / components / avec le code suivant -

import Ember from 'ember';

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

});

Ouvrez le fichier ember-actions.hbs créé sous app / templates / components / et entrez le code suivant -

{{#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}}

Créez le fichier application.hbs et ajoutez le code suivant -

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

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Après avoir double-cliqué sur le formulaire, il affichera le formulaire et y entrera les détails. Ensuite, double-cliquez sur le bouton Enregistrer pour enregistrer les détails -

Vous verrez maintenant les détails enregistrés comme indiqué dans la capture d'écran ci-dessous -