document.model.js

console.log('here i am');

(function() {
  var Bindings = function(mapping) {
    for(var i=0;i<mapping.length;i+=2) {
      var elements = mapping[i];
      for(var element in elements) {
        this[elements[element]] = mapping[i+1];
      }
    }
  };
  
  var activeElement;
  
  var bindings = new Bindings([
    ['dd', 'p'], function(element, model, name) {
      element.innerText = model[name];
    },
    ['input'], function(element, model, name) {
      element.value = model[name];
      element.onchange = function() {
        activeElement = element;
        model[name] = element.value;
        activeElement = undefined;
      };
      element.onkeyup = element.onchange;
    },
    ['button'], function(element, model, name) {
      element.onclick = function() {
        model[name]();
      };
    }
  ]);
  
  var makeNotifying = function(obj, name) {
    var item = obj[name];
    Object.defineProperty(obj, name, {
      get: function() { return item; },
      set: function(value) { item = value; obj.refresh(name); }
    });
  };
  
  var bind = function(model) {
    for(var field in model) {
      if(typeof(model[field]) !== 'function') {
        makeNotifying(model, field);
      }
    }
    model.refresh = function(name) {
      var selector = name === undefined ? '[data-bind]' : '[data-bind=' + name + ']';
      var elements = document.querySelectorAll(selector);
      
      [].forEach.call(elements, function(element) {
        var tag = element.tagName.toLowerCase();
        if(element !== activeElement && tag in bindings) {
          bindings[tag](element, model, element.dataset.bind);
        }
      });
      
      if('refreshed' in model) {
        model.refreshed(name);
      }
    };
    model.refresh();
  };

  var model_;  
  Object.defineProperty(document, 'model', {
    get: function() { return model_; },
    set: function(value) { model_ = value; bind(value); }
  });
}());