Skip to content

Instantly share code, notes, and snippets.

@cmawhorter
Created March 3, 2017 19:19
Show Gist options
  • Save cmawhorter/fd3ad0c969a45fe4f1202af879a80f40 to your computer and use it in GitHub Desktop.
Save cmawhorter/fd3ad0c969a45fe4f1202af879a80f40 to your computer and use it in GitHub Desktop.
concept of loading mithril components and passing around data structures
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment