Skip to content

Instantly share code, notes, and snippets.

@gilbert
Last active December 6, 2018 22:46
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gilbert/0418b8163a6304c8bc05 to your computer and use it in GitHub Desktop.
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