Class Ember.ViewMixin private

A list of properties of the view to apply as attributes. If the property is a string value, the value of that string will be applied as the value for an attribute of the property's name.

The following example creates a tag like <div priority="high" />.

import Component from '@ember/component';

export default Component.extend({
   attributeBindings: ['priority'],
   priority: 'high'
 });

If the value of the property is a Boolean, the attribute is treated as an HTML Boolean attribute. It will be present if the property is true and omitted if the property is false.

The following example creates markup like <div visible />.

import Component from '@ember/component';

export default Component.extend({
   attributeBindings: ['visible'],
   visible: true
 });

If you would prefer to use a custom value instead of the property name, you can create the same markup as the last example with a binding like this:

import Component from '@ember/component';

export default Component.extend({
   attributeBindings: ['isVisible:visible'],
   isVisible: true
 });

This list of attributes is inherited from the component's superclasses, as well.

Returns the current DOM element for the view.

The HTML id of the view's element in the DOM. You can provide this value yourself but it must be unique (just as in HTML):

{{my-component elementId="a-really-cool-id"}}

If not manually set a default value will be provided by the framework.

Once rendered an element's elementId is considered immutable and you should never change it. If you need to compute a dynamic value for the elementId, you should do this when the component or element is being instantiated:

import Component from '@ember/component';

export default Component.extend({
   init() {
     this._super(...arguments);
     let index = this.get('index');
     this.set('elementId', 'component-id' + index);
   }
 });

Tag name for the view's outer element. The tag name is only used when an element is first created. If you change the tagName for an element, you must destroy and recreate the view element.

By default, the render buffer will use a <div> tag for views.

If the tagName is '', the view will be tagless, with no outer element. Component properties that depend on the presence of an outer element, such as classNameBindings and attributeBindings, do not work with tagless components. Tagless components cannot implement methods to handle events, and their element property has a null value.