Data binding Google Docs UI [DRAFT] #gas #binding #ui

a8fc19aada88a61df8f9.md

###Data binding Google Docs UI [DRAFT]

index.html

<!-- //http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/ -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
  #app{
     padding: 10px
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
   <div id="app">
      <div class="form-group">
         <input type="text" data-bind-settings="name" />
      </div>
      <div class="form-group">
         <input type="date" data-bind-settings="date" />
      </div>
      <div class="form-group">
         <input type="time" data-bind-settings="time" />
      </div>
      <div class="form-group">
         <input type="radio" name="sex" value="male" data-bind-settings="check" checked>Male
         <input type="radio" name="sex" data-bind-settings="check" value="female" >Female
      </div>
      <div class="form-group">
         <input type="checkbox" name="type" value="type1" data-bind-settings="type">type1
         <input type="checkbox" name="type" data-bind-settings="type" value="type2" >type2
      </div>
     <!--  -->
      <p><strong>Name: </strong><span data-bind-settings="name"></span></p>
      <p><strong>Date: </strong><span data-bind-settings="date"></span></p>
      <p><strong>Time: </strong><span data-bind-settings="time"></span></p>
      <p><strong>Sex: </strong><span data-bind-settings="check"></span></p>
      <p><strong>Type: </strong><span data-bind-settings="type"></span></p>
     <!-- <p data-bind-settings="check"></p> -->
   </div>
</div>
<script>
   $(function() {
       console.log('ready!');
       $('[goal]').change(function(e) {
          console.log('Handler for .change() called.', e);
       });
       var user = new User('settings');
   });
   
   function DataBinder(object_id) {
     var self = this;
     console.log('new DataBinder');
     // Use a jQuery object as simple PubSub
     var pubSub = jQuery({});
   
     // We expect a `data` element specifying the binding
     // in the form: data-bind-<object_id>="<property_name>"
     var data_attr = "bind-" + object_id,
         message = object_id + ":change";
   
     // Listen to change events on elements with the data-binding attribute and proxy
     // them to the PubSub, so that the change is "broadcasted" to all connected objects
     jQuery(document).on('change', '[data-' + data_attr + ']', function(evt) {
       //console.log('change binding JQ', message);
       var $input = jQuery(this);  
       pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
     });
   
     // PubSub propagates changes to all bound elements, setting value of
     // input tags or HTML content of other tags
     pubSub.on( message, function( evt, prop_name, new_val ) {
       
       console.log(self);
       jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
         var $bound = jQuery(this);
   
         if ( $bound.is("input, textarea, select") ) {
           switch($bound.attr('type')){
             case 'radio': 
             //if($bound.is(':checked')) $bound.val( new_val );
             break;
             case 'checkbox': 
             //if($bound.is(':checked')) $bound.val( new_val );
             break;
             default:
             $bound.val(new_val);
           }
           //console.log('$bound input', new_val, $bound.attr('type'));
         } else {
           $bound.html(new_val);
            //console.log('$bound val');
         }
       });
     });
   
     return pubSub;
   }
   
   function User( uid ) {
     console.log('User');
     var binder = new DataBinder( uid ),
   
         user = {
           attributes: {},
   
           // The attribute setter publish changes using the DataBinder PubSub
           set: function( attr_name, val ) {
             this.attributes[ attr_name ] = val;
             binder.trigger( uid + ":change", [ attr_name, val, this ] );
           },
   
           get: function( attr_name ) {
             return this.attributes[ attr_name ];
           },
   
           _binder: binder
         };
   
     // Subscribe to the PubSub
     binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
       if ( initiator !== user ) {
         user.set( attr_name, new_val );
       }
     });
   
     return user;
   }
</script>