JSFiddle - React, Tailwind, and code Playground

by ramnathv

JavaScript

//data binding helper function
function binds(data) {
  return {onchange: function(e) {
    data[e.target.name] = e.target.value;
  }};
};

App = {}
App.controller = function(){
   this.user = {
     first: m.prop(''),
     last: m.prop(''),
     email: m.prop('')
   }
   this.out = m.prop("")
   this.submit = function(e){
     e.preventDefault()
     this.out(this.user)
   }.bind(this)
}

App.view = function(ctrl){ 
   return [m("form", [
    m("input", {oninput: m.withAttr("value", ctrl.user.first), value: ctrl.user.first()}),
    m("input", {oninput: m.withAttr("value", ctrl.user.last), value: ctrl.user.last()}),
    m("input", {oninput: m.withAttr("value", ctrl.user.email), value: ctrl.user.email()}),
    m("button", {onclick: ctrl.submit})
]), m("p", JSON.stringify(ctrl.out()))];
}

m.mount(document.body, App)