Mithril Organizing Components

architecture_1.js

var ContactForm = {
	controller: function() {
		this.contact = m.prop(new Contact())
		this.save = function(contact) {
			Contact.save(contact)
		}
	},
	view: function(ctrl) {
		var contact = ctrl.contact()

		return m("form", [
			m("label", "Name"),
			m("input", {oninput: m.withAttr("value", contact.name), value: contact.name()}),

			m("label", "Email"),
			m("input", {oninput: m.withAttr("value", contact.email), value: contact.email()}),

			m("button[type=button]", {onclick: ctrl.save.bind(this, contact)}, "Save")
		])
	}
}

var ContactList = {
	controller: function() {
		this.contacts = Contact.list()
	},
	view: function(ctrl) {
		return m("table", [
			ctrl.contacts().map(function(contact) {
				return m("tr", [
					m("td", contact.id()),
					m("td", contact.name()),
					m("td", contact.email())
				])
			})
		])
	}
}

m.route(document.body, "/", {
	"/list": ContactList,
	"/create": ContactForm
})

architecture_2.js

var ContactsWidget = {
	controller: function update() {
		this.contacts = Contact.list()
		this.save = function(contact) {
			Contact.save(contact).then(update.bind(this))
		}.bind(this)
	},
	view: function(ctrl) {
		return [
			m.component(ContactForm, {onsave: ctrl.save}),
			m.component(ContactList, {contacts: ctrl.contacts})
		]
	}
}

var ContactForm = {
	controller: function(args) {
		this.contact = m.prop(args.contact || new Contact())
	},
	view: function(ctrl, args) {
		var contact = ctrl.contact()

		return m("form", [
			m("label", "Name"),
			m("input", {oninput: m.withAttr("value", contact.name), value: contact.name()}),

			m("label", "Email"),
			m("input", {oninput: m.withAttr("value", contact.email), value: contact.email()}),

			m("button[type=button]", {onclick: args.onsave.bind(this, contact)}, "Save")
		])
	}
}

var ContactList = {
	view: function(ctrl, args) {
		return m("table", [
			args.contacts().map(function(contact) {
				return m("tr", [
					m("td", contact.id()),
					m("td", contact.name()),
					m("td", contact.email())
				])
			})
		])
	}
}

m.mount(document.body, ContactsWidget)