gistfile1.js

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')
			)
		)
	}
}