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.
Technically, Bower isn't really a package manager for Node.js, but rather, it's made in Node and built for usage in the frontend, hence why many popular frontend libraries, such as JQuery or Bootstrap have their distributions on there. Bower also has its own package repositories.
It's not completely obvious that `m.route.mode` needs setting before `m.route` is called (or at least it wasn't to me!), otherwise the initial routing from a URL typed in the location bar fails. This PR adds a note in the documentation to make this more clear.
@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")
])
}
}
