EmberJS - Partage des données des composants avec du contenu enveloppé

La description

Vous pouvez partager les données du composant avec son contenu encapsulé. Considérez que nous avons un composant appelé {{mon-composant}} pour lequel nous pouvons fournir une propriété de style pour écrire l'article. Vous pouvez écrire comme -

{{#my-component editStyle="markdown-style"}}

Le composant est fourni avec le hachage et fourni au modèle. Le editStyle peut être utilisé comme argument de l'assistant de composant.

Exemple

L'exemple ci-dessous spécifie le partage des données du composant avec son contenu encapsulé. Créez un composant avec le nom post-action qui sera défini sous app / components / .

Ouvrez le fichier post-action.js et ajoutez le code ci-dessous -

import Ember from 'ember';

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

Ouvrez maintenant le fichier de modèle de composant post-action.hbs avec le code ci-dessous -

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

Ouvrez le fichier index.hbs et ajoutez le code ci-dessous:

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

Production

Exécutez le serveur de braise et vous obtiendrez la sortie ci-dessous -

Lorsque vous cliquez sur le bouton, la fonction compFunc () se déclenchera et affichera la sortie ci-dessous -