Component
The Component
class defines a user interface 'building block'. A component
generates a virtual DOM to be rendered on each redraw.
Essentially, this is a wrapper for Mithril's components that adds several useful features:
- In the
oninit
andonbeforeupdate
lifecycle hooks, we store vnode attrs in `this.attrs. This allows us to use attrs across components without having to pass the vnode to every single method. - The static
initAttrs
method allows a convenient way to provide defaults (or to otherwise modify) the attrs that have been passed into a component. - When the component is created in the DOM, we store its DOM element under
this.element
; this lets us use jQuery to modify child DOM state from internal methods via thethis.$()
method. - A convenience
component
method, which serves as an alternative to hyperscript and JSX.
As with other Mithril components, components extending Component can be initialized
and nested using JSX, hyperscript, or a combination of both. The component
method can also
be used.
Static Method Summary
Static Public Methods | ||
public static |
Convenience method to attach a component without JSX. |
|
public static |
Initialize the component's attrs. This can be used to assign default values for missing, optional attrs. |
Method Summary
Public Methods | ||
public |
Returns a jQuery object for this component'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 |
|
public |
onbeforeremove(vnode: *) |
|
public |
onbeforeupdate(vnode: *) |
|
public |
oncreate(vnode: *) |
|
public |
oninit(vnode: *) |
|
public |
onremove(vnode: *) |
|
public |
onupdate(vnode: *) |
|
public |
Saves a reference to the vnode attrs after running them through initAttrs, and checking for common issues. |
Static Public Methods
Public Methods
public $(selector: undefined): * source
Returns a jQuery object for this component'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 component.$('li')
will return a jQuery object
containing all of the li
elements inside the DOM element of this
component.
Params:
Name | Type | Attribute | Description |
selector | undefined |
Return:
* |
public onbeforeremove(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public onbeforeupdate(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public oncreate(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public oninit(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public onremove(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public onupdate(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |