vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update components.md -- "Classic MVC" example

Browse source 
@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")
        ])
    }
}
This commit is contained in:
pelonpelon 2015-05-28 03:47:40 -05:00
parent 26a6664cd0
commit 7ce8429bf4
1 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/components.md
View file

@ -22,9 +22,9 @@ Let's create a simple model entity which we'll use in a simple application, to i
```javascript ```javascript
var Contact = function(data) { var Contact = function(data) {
data = data || {} data = data || {}
this.id = m.prop(data.id) this.id = m.prop(data.id || "")
this.name = m.prop(data.name) this.name = m.prop(data.name || "")
this.email = m.prop(data.email) this.email = m.prop(data.email || "")
} }
Contact.list = function(data) { Contact.list = function(data) {
return m.request({method: "GET", url: "/api/contact", type: Contact}) return m.request({method: "GET", url: "/api/contact", type: Contact})
@ -293,7 +293,7 @@ var Observable = function() {
} }
}, },
trigger: function(channel, args) { trigger: function(channel, args) {
console.log(channel) console.log("triggered: " + channel)
channels[channel].map(function(callback) { channels[channel].map(function(callback) {
callback(args) callback(args)
}) })
@ -386,7 +386,9 @@ var ContactsWidget = {
view: function(ctrl) { view: function(ctrl) {
return [ return [
m.component(ContactForm), 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` //ContactList no longer calls `Contact.save`
var ContactForm = { var ContactForm = {
controller: function(args) { controller: function(args) {
this.contact = m.prop(new Contact()) ctrl = this
this.save = function(contact) { ctrl.contact = m.prop(new Contact())
ctrl.save = function(contact) {
Observable.trigger("saveContact", {contact: contact}) Observable.trigger("saveContact", {contact: contact})
ctrl.contact = m.prop(new Contact()) //reset to empty contact
} }
return ctrl
}, },
view: function(ctrl, args) { view: function(ctrl, args) {
var contact = ctrl.contact() var contact = ctrl.contact()