Skip to content

Instantly share code, notes, and snippets.

@tobyzerner
Last active August 29, 2015 14:18
Show Gist options
  • Save tobyzerner/7686531d35f10875c2e2 to your computer and use it in GitHub Desktop.
Save tobyzerner/7686531d35f10875c2e2 to your computer and use it in GitHub Desktop.
var app = {
controller: function() {
var ctrl = this;
// Everything that we render, that could possibly change in the future, is
// an m.prop getter-setter function
ctrl.name = m.prop('Toby');
ctrl.showing = m.prop(false);
ctrl.items = m.prop([
m.prop(1),
m.prop(2),
m.prop(3)
]);
ctrl.show = function() {
ctrl.showing(true);
};
},
view: function(ctrl) {
// This is invoked only once when the vDOM is initially built
return m(
'div', {
// m.if returns a function. When it is called in the redraw process,
// it invokes the first argument (an m.prop) and diffs its value to
// the previous one. If it's different, it renders the second or third
// argument, depending on the value's true/falseyness.
className: m.if(ctrl.showing, 'showing')
},
m.if(ctrl.showing,
[
'Hello ',
ctrl.name, // Again, ctrl.name is a function, so it can be called/diffed on redraw
// m.each returns a function. When it is called in the redraw
// process, it invokes the first argument (an m.prop) and diffs its
// contents to the previous one. For each item that's different/new,
// it renders the second argument.
m('ul', m.each(ctrl.items, (item) => m('li', [
'item #',
item
])))
],
m('button', {onclick: ctrl.show}, 'Click here to show items')
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment