Nesting Components in MithrilJS

by ramnathv

JavaScript

function binds(prop){
  return {
    onchange: m.withAttr("value", prop),
    value: prop()
  }
}
var App = {
    controller: function(){
      this.message = m.prop("Helloo")  
    },
    view: function(ctrl) {
        return m(".app", [
            m("h1", "My App"),
            m("input", binds(ctrl.message)), 
            //nested component
            m.component(MyComponent, {message: ctrl.message()})
        ])
    }
}

var MyComponent = {
    controller: function(args) {
        return {greeting: args.message}
    },
    view: function(ctrl, args) {
        return m("h2", args.message)
    }
}

m.mount(document.body, App)