Entry.js

## Entry.js
//
// 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]'
  }
}

## EntryForm.js
(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'),
        ])
      }
    }
  }

})()

## EntryList.js
(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 + ")")
    ])
  }

})()

## index.html
<!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>