EmberJS - Aides à la rédaction
Vous pouvez ajouter des fonctionnalités supplémentaires aux modèles et convertir les valeurs brutes des modèles et des composants dans un format approprié pour les utilisateurs. Si vous utilisez l'application HTML plusieurs fois, vous pouvez ajouter une aide personnalisée à partir de n'importe quel modèle de guidon. Si le contexte actuel change, Ember.js exécutera automatiquement l'assistant et mettra à jour le DOM avec la valeur mise à jour.
Syntaxe
export function Helper_Name([values]) {
//code here
}
export default Ember.Helper.helper(Helper_Name);
Le tableau suivant répertorie les différentes façons d'utiliser les noms d'assistance -
S.No. | Noms et description des assistants |
---|---|
1 | Arguments d'assistance Vous pouvez transmettre plusieurs arguments à l'assistant en spécifiant après le nom de l'assistant. |
2 | Arguments nommés Vous pouvez transmettre les arguments nommés avec la valeur associée. |
3 | Échapper au contenu HTML Il est utilisé pour échapper les balises HTML lors de l'affichage du résultat. |
Exemple
L'exemple donné ci-dessous implémente l'assistant, qui prend plus d'une entrée et renvoie une seule sortie. Créez un nouvel assistant avec la commande suivante -
ember generate helper helper-name
Dans cet exemple, nous avons créé l'assistant avec le nom writinghelper . Ouvrez maintenant le fichier writinghelper.js qui est créé sous app / helpers / .
import Ember from 'ember';
export function formatHelper([value]) {
let var1 = Math.floor(value * 100);
let cents = value % 100;
let var3 = '$';
if (cents.toString().length === 1)
return `${var3}${var1}`;
}
export default Ember.Helper.helper(formatHelper);
Vous pouvez utiliser l'assistant "writinghelper" dans le modèle entre accolades. Ouvrez le fichier index.hbs et écrivez le code suivant -
Value is : {{writinghelper 5}}
{{outlet}}
Dans le code ci-dessus, nous avons passé la valeur d'assistance dans le modèle, qui affiche le nombre de cents dans une chaîne formatée.
Production
Exécutez le serveur de braises; vous recevrez la sortie suivante -