cmawhorter/mithril-table-example.html

## mithril-table-example.html
<body>
<script>
// our data returned from server
var myMockEventObject = {
	id: 'trkevt_1',
	created: '',
	updataed: '',
};

// pretend data returned from server
var mockData = [ myMockEventObject ];
</script>
<script>
var loadData = function() {
	return mockData;
};

var MainView = {
	oninit: function(vnode) {
		vnode.state.data = loadData();
		vnode.state.editingModel = {};
		vnode.state.editModel = function(model) {
			vnode.state.editingModel = model;
		};
	},

	view: function(vnode) {
		return [
			m(Table, {
				data: [].concat(vnode.state.data),
				edit: vnode.state.editModel,
			}),
			m(Form, { model: vnode.state.editingModel })
		];
	}
};

var Table = {
	oninit: function(vnode) {
		vnode.state.data = vnode.attrs.data || [];
	},

	view: function(vnode) {
		return m('table',
			vnode.state.data.map(function(model) {
				return m('button', {
					onclick: function(event) {
						vnode.attrs.edit(model);
					}
				}),
			})
		);
	},
};

var Form = {
	oninit: function(vnode) {
		vnode.state.model = vnode.attrs.model;
	},

	view: function(vnode) {
		return m('form', m('pre', JSON.stringify(vnode.state.model, null, 2)));
	},
}

m.mount(document.body, MainView); // passed to m.render => walks tree => dom
</script>
</body>
	<body>
	<script>
	// our data returned from server
	var myMockEventObject = {
	id: 'trkevt_1',
	created: '',
	updataed: '',
	};

	// pretend data returned from server
	var mockData = [ myMockEventObject ];
	</script>
	<script>
	var loadData = function() {
	return mockData;
	};

	var MainView = {
	oninit: function(vnode) {
	vnode.state.data = loadData();
	vnode.state.editingModel = {};
	vnode.state.editModel = function(model) {
	vnode.state.editingModel = model;
	};
	},

	view: function(vnode) {
	return [
	m(Table, {
	data: [].concat(vnode.state.data),
	edit: vnode.state.editModel,
	}),
	m(Form, { model: vnode.state.editingModel })
	];
	}
	};

	var Table = {
	oninit: function(vnode) {
	vnode.state.data = vnode.attrs.data \|\| [];
	},

	view: function(vnode) {
	return m('table',
	vnode.state.data.map(function(model) {
	return m('button', {
	onclick: function(event) {
	vnode.attrs.edit(model);
	}
	}),
	})
	);
	},
	};

	var Form = {
	oninit: function(vnode) {
	vnode.state.model = vnode.attrs.model;
	},

	view: function(vnode) {
	return m('form', m('pre', JSON.stringify(vnode.state.model, null, 2)));
	},
	}

	m.mount(document.body, MainView); // passed to m.render => walks tree => dom
	</script>
	</body>