EmberJS: compartir datos de componentes con contenido envuelto
Descripción
Puede compartir los datos del componente con su contenido envuelto. Considere que tenemos un componente llamado {{my-component}} para el cual podemos proporcionar una propiedad de estilo para escribir la publicación. Puedes escribir como -
{{#my-component editStyle="markdown-style"}}
El componente se proporciona con el hash y se suministra a la plantilla. El editStyle se puede utilizar como argumento para el componente auxiliar.
Ejemplo
El siguiente ejemplo especifica compartir los datos del componente con su contenido empaquetado. Cree un componente con el nombre de acción posterior 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" bodyStyle="compact-style"}} /><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 y obtendrá el siguiente resultado:
Cuando hace clic en el botón, la función compFunc () se activará y mostrará la siguiente salida: