Invocación de acciones en colaboradores de componentes

Puede invocar acciones en colaboradores de componentes directamente desde la plantilla.

Sintaxis

import Ember from 'ember';

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

Ejemplo

El ejemplo que se muestra a continuación especifica la invocación de acciones en colaboradores de componentes directamente desde la plantilla 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';
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);
      }
   }
});

Cree un servicio, que puede estar disponible en las diferentes partes de la aplicación. Utilice el siguiente comando para crear el servicio:

ember generate service emberactionmessage

Ahora abra el archivo de servicio emberactionmessage.js , que se crea en app / services / con el siguiente código:

import Ember from 'ember';

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

A continuación, cree un inicializador, que configura la aplicación a medida que se inicia. El inicializador se puede crear usando el siguiente comando:

ember generate initializer init

Abra el archivo inicializador init.js , que se crea en app / initializers / con el siguiente código:

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

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

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

<button {{action "pressMe"}}>Click here to see the text</button><br>  
<h4>{{text}}</h4>
{{yield}}

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

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

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Luego haga clic en el botón, se mostrará el texto de la página de servicio como se muestra en la captura de pantalla a continuación:

↰ Previous page