gilbert/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>
	//
	// 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>