Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
@Genert

This comment has been minimized.

Genert commented May 14, 2015

Very handful. Thanks!

@stivenson

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