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] 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()