Class Ember.ViewMixin

attributeBindings public

Defined in packages/ember-views/lib/mixins/view_support.js:18

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" />.

1
2
3
4
5
6

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 />.

1
2
3
4
5
6

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:

1
2
3
4
5
6

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.

element public

Defined in packages/ember-views/lib/mixins/view_support.js:147

Returns the current DOM element for the view.

elementId public

Defined in packages/ember-views/lib/mixins/view_support.js:253

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):

1

  {{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:

1
2
3
4
5
6
7
8
9

import Component from '@ember/component';

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

tagName public

Defined in packages/ember-views/lib/mixins/view_support.js:373

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.