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")
])
}
}
These changes make the the text clearer to me. I did not want to change the voice of the text, but I tried to clear out some verbosity and improve consistency. I did my best not to interfere with the logic of the prose.
This document seems written to stand on its own, so I recommend the following changes:
- a general explanation of the args param as in `controller: function(args) {` and `view: function(ctrl, args) { ...` (when first used, well before the signature)
- a specific explanation of {data: args} in m.request() (mithril.request.md could use the same treatment)
- an explanation of the extras param as in `controller: function(args, extras) {` and `view: function(ctrl, args, extras) { ...`
- the term *rollback* should be explained or replaced
- caveat #3/#4: Should *root element* be changed to *top-most element* so as not to be confused with the element the component is mounted on ?
- in testing, explain why the first param to view is `null`
I hope you can find some of this useful.
- The term *rollback* should be explained or replaced
- caveat #3/#4: Should *root element* be changed to *top-most element* so as not to be confused with the element the component is mounted on ?
