Invocando Ações em Colaboradores de Componente

Você pode invocar ações nos colaboradores do componente diretamente do modelo.

Sintaxe

import Ember from 'ember';

export default Ember.Component.extend ({
   target_attribute: Ember.inject.service(),
   // code for component implementation
});

Exemplo

O exemplo fornecido a seguir especifica ações de chamada em colaboradores do componente diretamente do modelo 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';
var inject = Ember.inject;

export default Ember.Component.extend ({
   message: inject.service(),
   text: 'This is test file',
   actions: {
      pressMe: function () {
         var testText = this.get('start').thisistest();
         this.set('text', testText);
      }
   }
});

Crie um serviço, que pode ser disponibilizado nas diferentes partes da aplicação. Use o seguinte comando para criar o serviço -

ember generate service emberactionmessage

Agora abra o arquivo de serviço emberactionmessage.js , que é criado em app / services / com o seguinte código -

import Ember from 'ember';

export default Ember.Service.extend ({
   isAuthenticated: true,
   thisistest: function () {
      return "Welcome to Tutorialspoint";
   }
});

Em seguida, crie um inicializador, que configura o aplicativo ao inicializar. O inicializador pode ser criado usando o seguinte comando -

ember generate initializer init

Abra o arquivo de inicializador init.js , que é criado em app / initializers / com o seguinte código -

export function initialize(app) {
   app.inject('component', 'start', 'service:emberactionmessage');
}

export default {
   name: 'init',
   initialize: initialize
};

Abra o arquivo ember-actions.hbs criado em app / templates / components / e digite o seguinte código -

<button {{action "pressMe"}}>Click here to see the text</button><br>  
<h4>{{text}}</h4>
{{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 -

Em seguida, clique no botão para exibir o texto da página de serviço, conforme mostrado na imagem abaixo -

↰ Previous page