EmberJS - Personalizzazione degli attributi

È possibile personalizzare gli attributi associandoli a un elemento DOM utilizzando la proprietà attributeBindings .

Sintassi

import Ember from 'ember';

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

Esempio

L'esempio fornito di seguito specifica la personalizzazione degli attributi associandoli a un elemento DOM utilizzando la proprietà attributeBindings . Crea un componente con il nome post-action , che verrà definito in app / components / .

Apri il file post-action.js e aggiungi il codice seguente:

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'font',            
   attributeBindings: ['color'],           
   color: "red"
});

Ora apri il file modello del componente post-action.hbs con la seguente riga di codice:

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

Apri il file index.hbs e aggiungi la seguente riga di codice:

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

Produzione

Esegui il server ember; riceverai il seguente output -