EmberJS - Personnalisation des attributs

Vous pouvez personnaliser les attributs en les liant à un élément DOM à l'aide de la propriété attributeBindings .

Syntaxe

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'tag_name',
   attributeBindings: ['attr_name'],
   attr_name: 'value'
});

Exemple

L'exemple donné ci-dessous spécifie la personnalisation des attributs en les liant à un élément DOM à l'aide de la propriété attributeBindings . 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 ({
   tagName: 'font',            
   attributeBindings: ['color'],           
   color: "red"
});

Ouvrez maintenant le fichier de modèle de composant post-action.hbs avec la ligne de code suivante -

<div>Welcome to Tutorialspoint...</div>
{{yield}}

Ouvrez le fichier index.hbs et ajoutez la ligne de code suivante -

<h1>Hello</h1>
{{post-action}}
{{outlet}}

Production

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