In addition to normal text, you may also want to have your templates contain HTML elements whose attributes are bound to the respective controller or component.
For example, imagine your controller has a property that contains a URL to an image:
<div id="logo">
<img src= alt="Logo">
</div>
This generates the following HTML:
<div id="logo">
<img src="http://www.example.com/images/logo.png" alt="Logo">
</div>
If you use data binding with a Boolean value, it will add or remove the specified attribute. For example, given this template:
<input type="checkbox" disabled=>
If isAdministrator
is true
, the rendered HTML will be:
<input type="checkbox" disabled>
If isAdministrator
is false
, the rendered HTML will be:
<input type="checkbox">
Passing HTML attributes to components
There are two kinds of things you can pass to components, named arguments and HTML attributes. For named arguments, you can consult Passing Properties to a Component. Let's discuss HTML attributes.
If you want your component to be able to receive HTML attributes when it is being used in a template,
you have two ways to do it: you can specify it in attributeBindings
,
or you can use ...attributes
in the component's template.
attributeBindings
By default, components that you have created will not apply HTML attributes you pass to them when using them in templates. This means that the following:
Will not apply data-test-my-custom-attribute
unless you have specified an attribute binding for it in the component class:
import Component from '@ember/component';
export default Component.extend({
attributeBindings: ['data-test-my-custom-attribute']
});
After specifying the attribute binding, Ember will apply it to the wrapper element of the component. There is another way, in case you want to apply the attributes to an element inside your template.
...attributes
You can apply arbitrary HTML attributes to an element inside your template via a special syntax, ...attributes
.
Building on top of the previous example, let us say we have the following NameEditor
class and template:
import Component from '@ember/component';
export default Component.extend({
enteredName: null
});
Now we want to be able to pass HTML attributes to NameEditor
so that it auto-focuses,
as well as passing a custom data attribute so we can easily get to it when testing.
To do that, we update the template to the following:
And now we can call our NameEditor
component with our desired HTML attributes:
We can see that autofocus
and data-test-name-editor
were applied to the rendered output.
This will work for any HTML attribute that you try to pass to the component.
You can read more about attributes and which are available at MDN's HTML attribute reference.