Two way binding using Rivets.js + WatchJS + Choona.js

Two way binding using Rivets.js + WatchJS + Choona.js

HTML

<script src="https://rawgithub.com/mikeric/rivets/master/dist/rivets.min.js"></script>
<script src="https://rawgithub.com/nsisodiya/choona.js/master/choona.js"></script>
<script src="https://rawgithub.com/melanke/Watch.JS/master/src/watch.js"></script>
<script src="https://rawgithub.com/nsisodiya/watchjs-adapter-for-rivetsjs/master/watchjs-adapter-for-rivetsjs.js"></script>
<div id="module">Module Not Loaded</div>

JavaScript

//This use https://rawgithub.com/nsisodiya/watchjs-adapter-for-rivetsjs/master/watchjs-adapter-for-rivetsjs.js
//Visit https://github.com/nsisodiya/watchjs-adapter-for-rivetsjs/


//This demo use choona.js but, you can do this kind of binding without choona.js , choona.js is used as a module Loader here
rivets.binders.input = {
  publishes: true,
  routine: rivets.binders.value.routine,
  bind: function(el) {
    el.addEventListener('input', this.publish);
  },
  unbind: function(el) {
    el.removeEventListener('input', this.publish);
  }
};
///////////////////// Class /////////////////
var PersonClass = function (name, task) {
    this.name = name;
    this.job = {
        task: task
    }
};
PersonClass.prototype = {
    change: function (Event, Scope) {
        if(Scope && Scope.scope instanceof PersonClass){
            //Fix Scope
            PersonClass.prototype.change.call(Scope.scope);
            return;
        }
        this.name = "Chetan";
        this.job.task = "Playing";
    },
    showData: function (Event, Scope) {
        if(Scope && Scope.scope instanceof PersonClass){
            //Fix Scope
            PersonClass.prototype.showData.call(Scope.scope);
            return;
        }
        alert(JSON.stringify(this));
    }
}


var App = choona.startApp({
    id: "module",
    module: {
        template: '<button data-on-click="scope:change">Change Model Data(1)</button><button id="changeType2">Change Model Data(2)</button><button data-on-click="scope:showData">Show Model Data</button><h3><span data-text="scope.name"></span> is <span data-text="scope.job.task"></span> </h3><input data-input="scope.name"><input data-input="scope.job.task"><p>Please type in input box and press Enter, These fields are 2 way binded, Changing the Model data automatically refelected to UI and changing UI data will be refelected in Model</p>',

        start: function () {
            var scope = new PersonClass("Narendra", "Engineer");
           ...