Skip to content

Instantly share code, notes, and snippets.

@barneycarroll barneycarroll/app.js forked from tobyzerner/app.js
Last active Mar 24, 2016

Embed
What would you like to do?
Mithril ES6 Components
// No dependencies! + 1 point
// Only one API to reference! + 1 point
const Widget = {
// Expose desired data directly using destructuring! + 1 point
controller({initialValue}) {
// No more retrieving references buried by the superclass! + 1 point
this.counter = initialValue;
// Two less methods! + 2 points
},
// Arrow function means implicit return! + 1 point
view : (ctrl,{name}) =>
m('div', [
// Just reference input arguments directly! Again! + 1 point
m('h1', 'This widget is set up for: '+ name),
m('p', 'Counter: ' + ctrl.counter),
// One less external reference! + 1 point
// Write exactly what you want instead of writing more API! + 1 point
m('button', { onclick: () => ctrl.counter++ }, 'Increment Counter')
])
}
const IndexPage = {
// No controller! + 1 point
view : ctrl =>
// Actually return the view contents! + 1 point
m('div', [
// Just call the stuff you need when you need it!
// All setup conditions in one place! No external references! Again!
// + 1 points
m( Widget, {name: 'foo', initialValue: 2, key: ctrl.widgetId } ),
// One less external reference! Explicit code! + 1 point
m('button', {onclick: () => ctrl.widgetId = Date.now()}, 'Reset Counter')
]);
}
}
// No `extends`! No `new`! + 2 points
m.mount(document.body, IndexPage);
const Widget = {
controller({initialValue}) {
this.counter = initialValue;
},
view : (ctrl,{name}) =>
m('div', [
m('h1', 'This widget is set up for: '+ name),
m('p', 'Counter: ' + ctrl.counter),
m('button', { onclick: () => ctrl.counter++ }, 'Increment Counter')
])
}
const IndexPage = {
view : ctrl =>
m('div', [
m( Widget, {name: 'foo', initialValue: 2, key: ctrl.widgetId } ),
m('button', {onclick: () => ctrl.widgetId = Date.now()}, 'Reset Counter')
]);
}
}
m.mount(document.body, IndexPage);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.