JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div data-model="MillEmployee.Employee">
  <input type="text" data-bind="name" class="form-control">
  <input type="text" data-bind="address1" class="form-control">
  <input type="text" data-bind="address2" class="form-control">
  <input type="text" data-bind="city" class="form-control">
  <input type="text" data-bind="state" class="form-control">
  <input type="text" data-bind="zip" class="form-control">
  <button data-click="savechanges">
  save
  </button>
</div>

JavaScript

var app = {
  modules: {},
  create: function(classname, interface, obj) {
    if (this.modules[classname] == undefined) {
      this.modules[classname] = {};
    }
    this.modules[classname][interface] = new obj();
  }
}

var appfunc = {
"savechanges":function(){
	alert('savechanges from app func')
}
}

app.create('MillEmployee', 'Employee', function() {
  this.name = "John St.Onge"
  this.address1 = "150 Prescott Street"
  this.address2 = "Tech Floor"
  this.city = "Worcester"
  this.state = "MA"
  this.zip = "01605"
  this.savechanges = function(){
  console.log(this);
  }
  return this;
})

console.log(app.modules.MillEmployee.Employee)

app.create('MillEmployee', 'EInfo', function() {
  this.name = "Sean Wessell"
  this.address1 = "150 Prescott Street"
  this.address2 = "Tech Floor"
  this.city = "Worcester"
  this.state = "MA"
  this.zip = "01605"
  this.savechanges = function(){
  console.log(this);
  }
  return this;
})

$('[data-model]').each(function(){
	var $parent = $(this);
	var $app = app;
  var classname = $parent.data('model').split('.')[0]
  var interface = $parent.data('model').split('.')[1]
  var $model = $app.modules[classname][interface];

  $parent.find('[data-bind]').each(function(){
		var $this = $(this);
    $this.val($model[$this.data('bind')])

	  $this.change(function(){
    	$model[$this.data('bind')] = $this.val();
      console.log($model)
    })

  });
  
  $parent.find('[data-click]').click(function(){
  	var $this = $(this);
  	$model[$this.data('click')]();
  })

})