Ember.ViewMixin Class


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

Module: ember

$ (selector) JQuerypublic

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

Returns a jQuery object for this view's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

For example, calling view.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this view.


selector [String]
a jQuery-compatible selector string


the jQuery object for the DOM node


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

Appends the view's element to the document body. If the view does not have an HTML representation yet the element will be generated automatically.

If your application uses the rootElement property, you must append the view within that element. Rendering views outside of the rootElement is not supported.

Note that this method just schedules the view to be appended; the DOM element will not be appended to the document body until all bindings have finished synchronizing.



appendTo (A) Ember-Viewprivate

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

Appends the view's element to the specified parent element.

Note that this method just schedules the view to be appended; the DOM element will not be appended to the given element until all bindings have finished synchronizing.

This is not typically a function that you will need to call directly when building your application. If you do need to use appendTo, be sure that the target element you are providing is associated with an Ember.Application and does not have an ancestor element that is associated with an Ember view.


A String|DOMElement|jQuery
selector, element, HTML string, or jQuery object




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

You must call destroy on a view to destroy the view (and all of its child views). This will remove the view from any parent node, then make sure that the DOM element managed by the view can be released by the memory manager.

findElementInParentElement (parentElement) DOMElementprivate

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

Attempts to discover the element in the parent element. The default implementation looks for an element with an ID of elementId (or the view's guid if elementId is null). You can override this method to provide your own form of lookup. For example, if you want to discover your element using a CSS class name instead of an ID.


parentElement DOMElement
The parent's DOM element


The discovered element

handleEvent (eventName, evt) private

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

Handle events from Ember.EventDispatcher


eventName String
evt Event


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

Setup a view, but do not finish waking it up.

  • configure childViews
  • register the view with the global views hash, which is used for event dispatch

nearestOfType (klass) deprecatedprivate

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

use yield and contextual components for composition instead.

Return the nearest ancestor that is an instance of the provided class or mixin.


klass Class,Mixin
Subclass of Ember.View (or Ember.View itself), or an instance of Ember.Mixin.



nearestWithProperty (property) deprecatedprivate

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

use yield and contextual components for composition instead.

Return the nearest ancestor that has a given property.


property String
A property name



renderToElement (tagName) HTMLBodyElementdeprecatedprivate

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

Use appendTo instead.

Creates a new DOM element, renders the view into it, then returns the element.

By default, the element created and rendered into will be a BODY element, since this is the default context that views are rendered into when being inserted directly into the DOM.

let element = view.renderToElement();
element.tagName; // => "BODY"

You can override the kind of element rendered into and returned by specifying an optional tag name as the first argument.

let element = view.renderToElement('table');
element.tagName; // => "TABLE"

This method is useful if you want to render the view into an element that is not in the document's body. Instead, a new body element, detached from the DOM is returned. FastBoot uses this to serialize the rendered view into a string for transmission over the network.

app.visit('/').then(function(instance) {
  let element; {
    element = renderToElement(instance);



tagName String
The tag of the element to create and render into. Defaults to "body".



replaceIn (target) Ember-Viewprivate

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

Replaces the content of the specified parent element with this view's element. If the view does not have an HTML representation yet, the element will be generated automatically.

Note that this method just schedules the view to be appended; the DOM element will not be appended to the given element until all bindings have finished synchronizing


target String|DOMElement|jQuery
A selector, element, HTML string, or jQuery object




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

Renders the view again. This will work regardless of whether the view is already in the DOM or not. If the view is in the DOM, the rendering process will be deferred to give bindings a chance to synchronize.

If children were added during the rendering process using appendChild, rerender will remove them, because they will be added again if needed by the next render.

In general, if the display of your view changes, you should modify the DOM element directly instead of manually calling rerender, which can be slow.


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

Called when the element of the view has been inserted into the DOM. Override this function to do any set up that requires an element in the document body.

When a view has children, didInsertElement will be called on the child view(s) first and on itself afterwards.


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

Called when the parentView property has changed.


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

Called when the view is about to rerender, but before anything has been torn down. This is a good opportunity to tear down any manual observers you have installed based on the DOM state


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

Called when the element of the view is going to be destroyed. Override this function to do any teardown that requires an element, like removing event listeners.

Please note: any property changes made during this event will have no effect on object observers.


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

Called when a view is going to insert an element into the DOM.


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

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

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

  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:

  attributeBindings: ['isVisible:visible'],
  isVisible: true

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

Default: []


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

Returns the current DOM element for the view.


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

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:

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


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

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.

Default: null

© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.