From 7ce8429bf4b6bf879f93f51bef6b3b931a3d6cc7 Mon Sep 17 00:00:00 2001
From: pelonpelon <pelonpelon@users.noreply.github.com>
Date: Thu, 28 May 2015 03:47:40 -0500
Subject: [PATCH 1/2] Update components.md -- "Classic MVC" example

@ArthurClemens pointed out in this gitter comment:
https://gitter.im/lhorie/mithril.js?at=55664ba1d21e5ed02ff06e54
that the Classic MVC example is broken:
https://lhorie.github.io/mithril/components.html#classic-mvc

I wanted to show a working jsfiddle with these changes applied, but I couldn't figure out how to get a POST request working. I do, however, have a jsbin that is working, although there are significant changes in the code to allow for GET and POST.
http://jsbin.com/cokesu/2/edit?js,output

A redraw is called for every character entered in the jsbin but AFAICT, not in this PR. I don't know why. It's as though `oninput` is really `onchange`. It's possible to limit the redraw to once when the "save" button is clicked, but this requires a change in logic:

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

        return m("form", [
            m("label", "Name"),
            m("input[name=name]"),

            m("label", "Email"),
            m("input[name=email]"),

            m("button[type=button]", {onclick: function(){
              contact = {
                name: m.prop(this.parentNode.elements.name.value),
                email: m.prop(this.parentNode.elements.email.value)
              }
              ctrl.save(contact)

            }}, "Save")
        ])
    }
}
---
 docs/components.md | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/components.md b/docs/components.md
index da76aa66..3153beb3 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -22,9 +22,9 @@ Let's create a simple model entity which we'll use in a simple application, to i
 ```javascript
 var Contact = function(data) {
 	data = data || {}
-	this.id = m.prop(data.id)
-	this.name = m.prop(data.name)
-	this.email = m.prop(data.email)
+	this.id = m.prop(data.id || "")
+	this.name = m.prop(data.name || "")
+	this.email = m.prop(data.email || "")
 }
 Contact.list = function(data) {
 	return m.request({method: "GET", url: "/api/contact", type: Contact})
@@ -293,7 +293,7 @@ var Observable = function() {
 			}
 		},
 		trigger: function(channel, args) {
-			console.log(channel)
+			console.log("triggered: " + channel)
 			channels[channel].map(function(callback) {
 				callback(args)
 			})
@@ -386,7 +386,9 @@ var ContactsWidget = {
 	view: function(ctrl) {
 		return [
 			m.component(ContactForm),
-			m.component(ContactList, {contacts: ctrl.contacts})
+			ctrl.contacts() === undefined
+			  ? m("div", "loading contacts...") //waiting for promise to resolve
+			  : m.component(ContactList, {contacts: ctrl.contacts})
 		]
 	}
 }
@@ -394,10 +396,13 @@ var ContactsWidget = {
 //ContactList no longer calls `Contact.save`
 var ContactForm = {
 	controller: function(args) {
-		this.contact = m.prop(new Contact())
-		this.save = function(contact) {
+	        ctrl = this
+		ctrl.contact = m.prop(new Contact())
+		ctrl.save = function(contact) {
 			Observable.trigger("saveContact", {contact: contact})
+			ctrl.contact = m.prop(new Contact()) //reset to empty contact
 		}
+		return ctrl
 	},
 	view: function(ctrl, args) {
 		var contact = ctrl.contact()

From 648343c01cab182f8ed4150f7df29367217ba51d Mon Sep 17 00:00:00 2001
From: pelonpelon <pelonpelon@users.noreply.github.com>
Date: Thu, 2 Jul 2015 18:54:59 -0500
Subject: [PATCH 2/2] Help users find documentation on unmounting components

It's a common question on Gitter: How do I unmount a component?
Presently this Google Search: `unmount site:http://lhorie.github.io/`
returns one result: `mithril.route.html` -- I have no idea why, there's no "unmount" on the page.

Adding the words unmounting and unmount to this doc page will make them discoverable directly and through Google.
---
 docs/mithril.component.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/mithril.component.md b/docs/mithril.component.md
index 4e26d0b0..3aa7cdd6 100644
--- a/docs/mithril.component.md
+++ b/docs/mithril.component.md
@@ -13,7 +13,7 @@
 	- [Stateful components](#stateful-components)
 	- [Parameterized initial state](#parameterized-initial-state)
 - [Data-driven component identity](#data-driven-component-identity)
-- [Unloading components](#unloading-components)
+- [Unloading/Unmounting components](#unloading-components)
 - [Nested asynchronous components](#nested-asynchronous-components)
 - [Limitations and caveats](#limitations-and-caveats)
 - [Opting out of the auto redrawing system](#opting-out-of-the-auto-redrawing-system)
@@ -385,7 +385,7 @@ If a component's controller contains the function `onunload`, it will be called
 - when a new call to `m.mount` updates the root DOM element of the component in question
 - when a route changes (if you are using [`m.route`](mithril.route.md))
 
-To unload a component without loading another component, you can simply call `m.mount` with a `null` as the component parameter:
+To unload/unmount a component without loading another component, you can simply call `m.mount` with a `null` as the component parameter:
 
 ```javascript
 m.mount(rootElement, null);