Ember.ViewMixin Class
Item Index
Methods
- $
- append
- appendTo
- destroy
- findElementInParentElement
- handleEvent
- init
- nearestOfType deprecated
- nearestWithProperty deprecated
- renderToElement deprecated
- replaceIn
- rerender
Methods
$
-
[selector]
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.
Parameters:
-
[selector]
String optionala jQuery-compatible selector string
Returns:
the jQuery object for the DOM node
append
()
Ember.View
private
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.
Returns:
receiver
appendTo
-
A
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.
Parameters:
-
A
String | DOMElement | JQueryselector, element, HTML string, or jQuery object
Returns:
receiver
destroy
()
private
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
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.
Parameters:
-
parentElement
DOMElementThe parent's DOM element
Returns:
The discovered element
handleEvent
-
eventName
-
evt
Handle events from Ember.EventDispatcher
Parameters:
-
eventName
String -
evt
Event
init
()
private
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
Return the nearest ancestor that is an instance of the provided class or mixin.
Parameters:
-
klass
Class,MixinSubclass of Ember.View (or Ember.View itself), or an instance of Ember.Mixin.
Returns:
Ember.View
nearestWithProperty
-
property
Return the nearest ancestor that has a given property.
Parameters:
-
property
StringA property name
Returns:
Ember.View
renderToElement
-
tagName
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;
Ember.run(function() {
element = renderToElement(instance);
});
res.send(serialize(element));
});
Parameters:
-
tagName
StringThe tag of the element to create and render into. Defaults to "body".
Returns:
element
replaceIn
-
target
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
Parameters:
-
target
String | DOMElement | JQueryA selector, element, HTML string, or jQuery object
Returns:
received
rerender
()
public
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.
Properties
element
DOMElement
public
Returns the current DOM element for the view.
elementId
String
public
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() {
this._super(...arguments);
let index = this.get('index');
this.set('elementId', 'component-id' + index);
}
});
tagName
String
public
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
Events
didInsertElement
public
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.
parentViewDidChange
private
Called when the parentView property has changed.
willClearRender
public
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
willDestroyElement
public
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.
willInsertElement
public
Called when a view is going to insert an element into the DOM.