EmberJS - Customizando Atributos

Você pode personalizar os atributos vinculando-os a um elemento DOM usando a propriedade attributeBindings .

Sintaxe

import Ember from 'ember';

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

Exemplo

O exemplo fornecido a seguir especifica a personalização dos atributos vinculando-os a um elemento DOM usando a propriedade attributeBindings . Crie um componente com o nome pós-ação , que será definido em app / components / .

Abra o arquivo post-action.js e adicione o seguinte código -

import Ember from 'ember';

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

Agora abra o arquivo de modelo de componente post-action.hbs com a seguinte linha de código -

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

Abra o arquivo index.hbs e adicione a seguinte linha de código -

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

Resultado

Execute o servidor ember; você receberá a seguinte saída -