mithril-component
v1.0.2
Published
React style components for Mithril.js
Downloads
5
Maintainers
Readme
Mithril Component
React style components for Mithril.js
Install
- Download the latest package
- NPM:
npm install mithril-component
Usage
Node.js / Browserify
// Include mithril
var m = require('mithril')
// Pass mithril to the component system.
// Only required to overload once, subsequent overloads will
// return the same instance
require('mithril-component')(m)
Browser
<script src="path/to/mithril.js" type="text/javascript"></script>
<script src="path/to/mithril.component.js" type="text/javascript"></script>
Documentation
m.createComponent(Object specification)
Creates and returns a component class constructor which takes two arguments:
Function ComponentClassConstructor (Object props, Array Children)
Component specification requires a view
method which returns a mithril node element. Components specification may also contain a controller
method which is ran when the class is created, values returned will be set on this.state
, to learn more see Specification Object.
Specification Object
specification.controller(Object props, Array children)
Invoked immediately when used within another mithril element as a child.
Using Promises
Supports returning A+ promises, when a promise is returned inside of the controller method, the result is caught by a wrapper which then attaches itself to the
then
andcatch
(should it exist) methods. On success the promise resultdata
replacescomponent.state
. On errorcomponent.onControllerError
is invoked with the error passed as the first argument.specification.view()
Render method, should return a mithril element.specification.onControllerError(Object error)
Invoked when a returned promise fails.specification.onUnload()
Invoked when component is unloaded.
Component Class Object
When ComponentClassConstructor
is invoked the resulting object contains the following properties.
component.state
Component class internal statecomponent.props
Component class properties passed from parentcomponent.setState(Object State)
Setscomponent.state
and invokesm.redraw(true)
component.controller(Object props, Array children)
component.view()
Render method, should return a mithril element.component.onControllerError(Object error)
Invoked when a returned promise fails.component.onUnload()
Invoked when component is unloaded.
Example Usage
- Basic usage w/ Children props ( React Equivalent )
var CheckLink = m.createComponent({
view: function () {
this.props.children.unshift('√ ')
return m('a', this.props.attr || {}, this.props.children);
}
})
m.render(document.body, m('div.component-holder', [
CheckLink({
attr: { href: '#' },
}, 'Check, Check it out')
]))
- Controller usage
var TimerComponent = m.createComponent({
controller: function () {
return this.startClock()
},
startClock: function () {
var component = this
this.state.seconds = 0
this.state.clock = setInterval(function () {
component.state.seconds++
component.setState(component.state)
}, 1000)
return this.state
},
stopClock: function () {
clearInterval(this.state.clock)
},
onUnload: function () {
this.stopClock()
},
view: function (ctrl) {
return m('div.timer-component', this.state.seconds);
}
})
m.mount(document.body, TimerComponent())
License
Licensed under The MIT License.