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 -
![](https://assets.edu.lat/emberjs/images/emberjs-comp_wrap_cont.jpg)
Lorsque vous cliquez sur le bouton, la fonction compFunc () se déclenchera et affichera en outre la sortie suivante -
![](https://assets.edu.lat/emberjs/images/emberjs-comp_wrap_cont1.jpg)