EmberJS - Envolviendo contenido en un componente

Puede envolver el contenido en un componente utilizando las plantillas. Considere que tenemos un componente llamado {{my-component}}, que se puede incluir en el componente pasándole propiedades en otra plantilla como se muestra a continuación:

{{my-component title = title action = "funcName"}}

Puede compartir los datos del componente con su contenido envuelto. Para obtener más información, haga clic en este enlace .

Ejemplo

El ejemplo que se muestra a continuación especifica cómo envolver el contenido en un componente. Cree un componente con el nombre post-action , que se definirá en app / components / .

Abra el archivo post-action.js y agregue el siguiente código:

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //This method sends the specified action
         this.sendAction();
      }
   }
});

Ahora abra el archivo de plantilla de componente post-action.hbs con el siguiente código:

<input type = "button" value = "Click me" {{action "compFunc"}} /><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

Abra el archivo index.hbs y agregue el siguiente código:

<b>Click the button to check title property value</b>
{{post-action title = title action = "compFunc"}}
{{outlet}}

Salida

Ejecute el servidor ember; recibirá el siguiente resultado:

Cuando hace clic en el botón, la función compFunc () se activará y mostrará la siguiente salida: