Mithril ES6 Components
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()); |
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; | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
stivenson
commented
May 13, 2017
thank you !! man :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Genert commentedMay 14, 2015
Very handful. Thanks!