View.js

function Storage(config) {
    this.store = config || {};
}
 
Storage.prototype.put = function (key, object, params, done) {
    done = done || params;
    return done(null, this.store[key] = object);
};
 
Storage.prototype.get = function (key, params, done) {
    done = done || params;
    return done(null, this.store[key]);
};
 
Storage.prototype.del = function (key, params, done) {
    done = done || params;
    delete this.store[key];
    return done(null);
};

function View(config) {
    this.handlers = {};
    this.state = config.state;
    this.events = config.events;
    this.template = config.template;
    this.root = typeof config.root === "string" ?
        document.createElement(config.root) : 
        config.root;
}
 
View.prototype.put = function (key, object, params, done) {
    this.state.put(key, object, params, done);
    this.clean = false;
    this.render();
};
 
View.prototype.get = function (key, params, done) {
    this.state.get(key, params, done);
};
 
View.prototype.del = function (key, params, done) {
    this.state.del(key, params, done);
    this.clean = false;
    this.render();
};
 
View.prototype.render = function () {
  var state = this.state;
  if (this.clean = !this.clean) this.root.innerHTML =
      this.template.replace (/({{[^{}]*}})/g,
          function (match) {
              return state.store[
                  match.substr(2, match.length-4)
              ];
          });
  this.renderChildren();
  this.bind();
  return this.root;
};

View.prototype.renderChildren = function () {
  for (var key in this.state.store) {
      if (this.state.store[key].render) {
          var targetNode = this.root.querySelector(key);
          if (targetNode) targetNode.appendChild(
              this.state.store[key].render()
          );
      }
  }    
};

View.prototype.bind = function () {
    var self = this;
    for(var key in this.events) {
        this.root.removeEventListener(key, this.handlers[key]);
        this.root.addEventListener(key, this.handlers[key] = (function (key) {
            return function (e) {
                self.events[key].call(self, e, this);
            };
        })(key));
    }
};

var model = new Storage({
    name: "james",
    value: ""
});

var templates = {
    title: "<h3>{{value}}</h3>",
    input: "<input type='text' name='name' id='name' value='{{value}}'>",
    root:  "<h1>{{title}}</h1><div id='view'></div><div id='desc'></div>"
};

var views = {};

views.title = new View({
    root: "div",
    state: model,
    template: templates.title
});

views.input = new View({
    root: "div",
    state: model,
    template: templates.input
});

var view = new View({
    template: templates.root,
    root: document.body,
    state: new Storage({
        "#view": views.title,
        "#desc": views.input,
        title: "dataBinding101" 
    }),
    events: {
        "mouseover": function (e) 
        { this.root.style.color = "red"; },
        "mouseout": function (e) 
        { this.root.style.color = ""; },
        "keyup": function (e) {
            this.state.get("#view", function (err, v) {
                v.put("value", e.target.value || '', function () {});
            });
        }
    }
});
 
view.render();