EmberJS - Emballage du contenu dans un composant

Vous pouvez encapsuler le contenu dans un composant à l'aide des modèles. Considérez que nous avons un composant appelé {{mon-composant}}, qui peut être enveloppé dans un composant en lui passant des propriétés dans un autre modèle comme indiqué ci-dessous -

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

Vous pouvez partager les données du composant avec son contenu encapsulé. Pour plus d'informations, cliquez sur ce lien .

Exemple

L'exemple ci-dessous spécifie comment envelopper le contenu dans un composant. 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 suivant -

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 suivant -

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

Ouvrez le fichier index.hbs et ajoutez le code suivant -

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

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

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