Two-Way Data Binding jQuery and Object.observe

A Pen By Garrett-

Pen Settings

↑ Insert the most common viewport meta tag

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.


    <title>Two-Way Data Binding with jQuery and Object.observe</title>
      First Name: <input type="text" data-bind="firstName" />
      Last Name: <input type="text" data-bind="lastName" />
      Age: <input type="number" data-bind="age">
      <select data-bind="color">
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
        <option value="Yellow">Yellow</option>
      Name = 
      <span data-bind="firstName"></span>
      <span data-bind="lastName"></span>
      Age = 
      <span data-bind="age"></span>
      Color = <span data-bind="color"></span>



              /* None */


    Two-Way binding with jQuery and Object.observe
    Author: Garrett
    *********** Notice *************
    You will need to be using a browser that
    supports Object.observe currently
    the only browser to do so is
    Chrome Canary V 29+
    You need to turn on Experimental JavaScript
    in chrome://flags
    How to use it
    To use this you would create one Object
    this object will house all of the keys
    you're going to want bound to a(n) element(s)
    on the page. In my example I have firstName
    and lastName. Then you would use the
    data-bind attribute on the element setting
    it's value equal to the key in the Object.
    You will need to run jQuery.bindings([bindings object]);
    It'll traverse the DOM and kick everything off for you.

/* The Plugin */

;(function ( $, window, undefined ) {

  var pluginName = 'bindings';

  function Plugin( bindings ) {
    this.bindings = bindings;
    this._name = pluginName;


  Plugin.prototype.init = function () {
    var self = this;

      var $this = $(this)
      , key = $this.attr('data-bind')
      , hasVal = $'select, options, input, textarea')
      , keyup = $'input, textarea');
      // Bind our Element to change the object
      $this.on('keyup.bindings change.bindings', function(){
        self.bindings[key] = hasVal ? $this.val() : $this.html();
      // Bind our Object to change the element
      Object.observe(self.bindings, function(obj){$this, obj, key);

  }; = function (ele, obj, key) {
      var $elem = ele.jquery === undefined ? $(ele) : ele;
      $elem[$'select, option, input, textarea')?'val':'html']( obj[0].object[key] );

  $[pluginName] = function ( bindings ) {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin( bindings ));

}(jQuery, window));

if(Object.hasOwnProperty('observe')) {
  var binds = {
    firstName: 'John',
    lastName: 'Doe',
    age: 22,
    color: 'Blue'
} else {
  alert('Sorry your browser does not support Object.observe! Please Read "Notice" section in the JS panel.');
Loading ..................