EmberJS - Lidando com a conclusão da ação e argumentos de aprovação

O componente pode controlar a conclusão da ação retornando uma promessa e os argumentos podem ser passados para um componente usando um auxiliar de ação.

Sintaxe

A ação pode ser implementada como -

import Ember from 'ember';

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

Os argumentos podem ser passados para um componente como -

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

Exemplo

O exemplo a seguir especifica o tratamento da conclusão da ação e a passagem de argumentos em seu aplicativo. Crie um componente com o nome ember-actions e abra o arquivo de modelo de componente ember-actions.js criado em app / components / com o seguinte código -

import Ember from 'ember';

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

});

Abra o arquivo ember-actions.hbs criado em app / templates / components / e digite o seguinte 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}}

Crie o arquivo application.hbs e adicione o seguinte código -

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

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Após clicar duas vezes no formulário, ele irá exibir o formulário e inserir os detalhes nele. Em seguida, clique duas vezes no botão Salvar para salvar os detalhes -

Agora você verá os detalhes salvos conforme mostrado na imagem abaixo -

↰ Previous page