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