Created
April 8, 2015 02:38
-
-
Save tobyzerner/da3ddbadbc8c20891bb3 to your computer and use it in GitHub Desktop.
Mithril ES6 Components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from './component'; | |
class Widget extends Component { | |
init(ctrl) { | |
var props = this.props; | |
ctrl.counter = props.initialValue; | |
ctrl.increment = function() { | |
ctrl.counter++; | |
} | |
ctrl.reset = function() { | |
ctrl.counter = props.initialValue; | |
} | |
} | |
view(ctrl) { | |
return m('div', [ | |
m('h1', 'This widget is set up for: '+this.props.name), | |
m('p', 'Counter: '+ctrl.counter), | |
m('button', {onclick: ctrl.increment}, 'Increment Counter') | |
]) | |
} | |
} | |
class IndexPage extends Component { | |
init(ctrl) { | |
ctrl.widget = new Widget({name: 'foo', initialValue: 2}).instance() | |
} | |
view(ctrl) { | |
return m('div', [ | |
ctrl.widget.render(), | |
m('button', {onclick: ctrl.widget.reset}, 'Reset Counter') | |
]); | |
} | |
} | |
m.mount(document.body, new IndexPage()); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class Component { | |
constructor(props) { | |
this.props = props || {}; | |
var component = this; | |
this.controller = function() { | |
var ctrl = {}; | |
component.init(ctrl); | |
return ctrl; | |
}; | |
this.controller.$original = this.init; | |
} | |
init(ctrl) { | |
} | |
instance() { | |
var component = this; | |
var controller = new this.controller(); | |
controller.render = function() { | |
return component.view(controller); | |
}; | |
return controller; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very handful. Thanks!