Reference Source
import Component from 'flarum/Component.js'
public class | source

Component

The Component class defines a user interface 'building block'. A component can generate a virtual DOM to be rendered on each redraw.

An instance's virtual DOM can be retrieved directly using the {@link Component#render} method.

See:

Example:

this.myComponentInstance = new MyComponent({foo: 'bar'});
return m('div', this.myComponentInstance.render());

Alternatively, components can be nested, letting Mithril take care of
instance persistence. For this, the static {@link Component.component} method
can be used.
return m('div', MyComponent.component({foo: 'bar'));

Static Method Summary

Static Public Methods
public static

component(props: Object, children: *): Object

Get a Mithril component object for this component, preloaded with props.

public static

initProps(props: Object)

Initialize the component's props.

Constructor Summary

Public Constructor
public

constructor(props: Object, children: Array | Object)

Member Summary

Public Members
public

element: *

The root DOM element for the component.

public

The properties passed into the component.

Method Summary

Public Methods
public

$(selector: String): jQuery

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.

public

config(isInitialized: Boolean, context: Object, vdom: Object)

Called after the component's root element is redrawn. This hook can be used to perform any actions on the DOM, both on the initial draw and any subsequent redraws. See Mithril's documentation for more information.

public

Called when the component is destroyed, i.e.

public

Get the renderable virtual DOM that represents the component's view.

This should NOT be overridden by subclasses. Subclasses wishing to define their virtual DOM should override Component#view instead.

Protected Methods
protected

init()

Called when the component is constructed.

protected

Get the virtual DOM that represents the component's view.

Static Public Methods

public static component(props: Object, children: *): Object source

Get a Mithril component object for this component, preloaded with props.

Params:

NameTypeAttributeDescription
props Object
  • optional

Properties to set on the component

children *

Return:

Object

The Mithril component object

Return Properties:

NameTypeAttributeDescription
controller function
view function
component Object

The class of this component

props Object

The props that were passed to the component

See:

public static initProps(props: Object) source

Initialize the component's props.

Params:

NameTypeAttributeDescription
props Object

Public Constructors

public constructor(props: Object, children: Array | Object) source

Params:

NameTypeAttributeDescription
props Object
children Array | Object

Public Members

public element: * source

The root DOM element for the component.

public props: Object source

The properties passed into the component.

Public Methods

public $(selector: String): jQuery 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:

NameTypeAttributeDescription
selector String
  • optional

a jQuery-compatible selector string

Return:

jQuery

the jQuery object for the DOM node

public config(isInitialized: Boolean, context: Object, vdom: Object) source

Called after the component's root element is redrawn. This hook can be used to perform any actions on the DOM, both on the initial draw and any subsequent redraws. See Mithril's documentation for more information.

Params:

NameTypeAttributeDescription
isInitialized Boolean
context Object
vdom Object

See:

public onunload(e: Object) source

Called when the component is destroyed, i.e. after a redraw where it is no longer a part of the view.

Params:

NameTypeAttributeDescription
e Object

See:

public render(): Object source

Get the renderable virtual DOM that represents the component's view.

This should NOT be overridden by subclasses. Subclasses wishing to define their virtual DOM should override Component#view instead.

Return:

Object

Example:

this.myComponentInstance = new MyComponent({foo: 'bar'});
return m('div', this.myComponentInstance.render());

Protected Methods

protected init() source

Called when the component is constructed.

protected view(): Object source

Get the virtual DOM that represents the component's view.

Return:

Object

The virtual DOM