Event Volunteers: Mithril.js Example from Tutorial Part 1 http://gilbert.ghost.io/mithril-js-tutorial-1/
// | |
// A model representing an Entry | |
// | |
window.Entry = {} | |
var store = [] | |
var idCounter = 1 | |
Entry.all = function () { | |
return store | |
} | |
Entry.create = function (attrs) { | |
attrs.id = (idCounter += 1) | |
attrs.enteredAt = Date.now() | |
store.push(attrs) | |
} | |
Entry.vm = function () { | |
return { | |
enteredAt: null, | |
volunteers: [ Entry.volunteerVM() ] | |
} | |
} | |
Entry.volunteerVM = function () { | |
return { | |
name: '[Your name]', | |
email: '[Your email]' | |
} | |
} |
(function () { | |
window.EntryForm = function () { | |
var entry = Entry.vm() | |
function add () { | |
entry.volunteers.push( Entry.volunteerVM() ) | |
} | |
function remove (idx) { | |
entry.volunteers.splice(idx, 1) | |
} | |
function submit () { | |
Entry.create(entry) | |
m.route.set('/') | |
} | |
return { | |
view() { | |
var showRemove = (entry.volunteers.length >= 2) | |
return m('.entry-form', [ | |
m('h1', "New Entry"), | |
m('h3', "Please enter each volunteer's contact information:"), | |
entry.volunteers.map(function(volunteer, idx) { | |
return m('fieldset', [ | |
m('legend', "Volunteer #" + (idx+1)), | |
m('label', "Name:"), | |
m('input[type=text]', { | |
value: volunteer.name, | |
onchange(e) { | |
volunteer.name = e.target.value | |
} | |
}), | |
m('br'), | |
m('label', "Email:"), | |
m('input[type=text]', { value: volunteer.email }), | |
showRemove && | |
m('button', { onclick() { remove(idx) } }, 'remove') | |
]) | |
}), | |
m('button', { onclick: add }, 'Add another volunteer'), | |
m('br'), | |
m('button', { onclick: submit }, 'Submit'), | |
]) | |
} | |
} | |
} | |
})() |
(function () { | |
window.EntryList = { | |
view() { | |
return m('.entry-list', [ | |
m('h1', "All Entries"), | |
m('a[href=/entries/new]', { oncreate: m.route.link }, "Add New Entry"), | |
Entry.all().map( entryView ) | |
]) | |
} | |
} | |
function entryView (entry) { | |
var date = new Date(entry.enteredAt) | |
return m('.entry', [ | |
m('label', "Entered at: ", date.toString()), | |
m('ul', entry.volunteers.map( volunteerView )) | |
]) | |
} | |
function volunteerView (volunteer) { | |
return m('li.volunteer', [ | |
m('label', volunteer.name), | |
m('label', "(" + volunteer.email + ")") | |
]) | |
} | |
})() |
<!doctype html><title>Volunteer Events</title> | |
<div id="app"></div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.0.0-rc.3/mithril.min.js"></script> | |
<script src="src/models/Entry.js"></script> | |
<script src="src/components/EntryForm.js"></script> | |
<script src="src/components/EntryList.js"></script> | |
<script> | |
// Seed some data | |
Entry.create({ | |
"enteredAt": 1443018758199, | |
"volunteers": [ | |
{ name: "Alice", email: "alice@example.com" }, | |
{ name: "Bob", email: "bob@example.com" } | |
] | |
}) | |
Entry.create({ | |
"enteredAt": 1443019047227, | |
"volunteers": [ | |
{ name: "Carl", email: "carl@example.com" }, | |
{ name: "Dan", email: "dan@example.com" }, | |
{ name: "Erl", email: "erl@example.com" }, | |
] | |
}) | |
// Put the component on the page | |
m.route(document.getElementById('app'), '/', { | |
'/': EntryList, | |
'/entries/new': EntryForm | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment