arobson/binder.js

## binder.js
var DomWriter = function (target, namespace) {
    var instance = this;
    var template = namespace;

    var coalesce = function( value, defaultValue ) {
        return typeof(value) != 'undefined' ?
            value : defaultValue;
    };

    this.isObject = function( value ) {
        return typeof(value) === 'object';
    };

    this.addSubscription = function( path, element ) {
        postal.subscribe( "binding", path, function( msg ) {
            instance.write( path, msg );
        });
        if( _(instance[path]).isUndefined() ) {
            instance[path] = element;
        }
    };

    this.crawl = function( namespace, element, callback ) {
        _(element)
            .chain()
            .keys()
            .each( function( key ) {
                var child = element[key];
                var fqn = namespace === "" ?
                    key : namespace + "." + key;
                callback( namespace, key, child );
                if( !_.isNull( child ) && instance.isObject( child ) ) {
                    instance.crawl( fqn, child, callback );
                }
        });
    };

    this.domCrawl = function( namespace, element, callback ) {
        var id = coalesce( element["id"], "" );
        var fqn = namespace == "" ?
            id : ( id === "" ? namespace : namespace + "." + id );
        callback( fqn, id, element );
        if( element.children !== undefined &&
            element.children.length > 0 ) {
            _(element.children)
                .chain()
                .each( function( child ) {
                        instance.domCrawl(
                            fqn,
                            child,
                            callback );
                });
        }
    };

    this.domCrawl( "", target[0], function( namespace, key, child ) {
        var prefix = template + ".";
        var member = namespace === template ?
            namespace : namespace.replace( prefix, "", "gi");
        instance.addSubscription( member, child );
    });

    this.write = function( path, value ) {
        element = this[path];
        this[$(element)[0].tagName.toLowerCase()]
            ( path, element, value );
    };

    this.div = function( fqn, element, value ) {
        if( instance.isObject( value ) ) {
            instance.crawl( "", value, function( namespace, key, child ) {
                instance.write(
                    namespace === "" ? key : namespace + "." + key,
                    child );
            });
        }
        else {
            $(element).text( value );
        }
    };

    this.span = function( fqn, element, value ) {
        $(element).text( value );
    };

    this.input = function( fqn, element, value ) {
        $(element).val( value );
    };

    this.ul = function( fqn, element, value ) {
        var children = $(element).children("li");
        if( children.length < value.length ) {
            $(element).empty();
            var li = children[0];
            var indx = 0;
            _(value)
                .each( function( child ) {
                    var newLi = $(li)
                        .clone()
                        .attr( "id", indx )
                        .appendTo( element );
                    instance[ fqn + "." + indx ] = newLi[0];

                    instance.domCrawl(
                        fqn,
                        newLi[0],
                        function( namespace, key, child ) {
                            var prefix = template + ".";
                            var member = namespace === template ?
                                namespace : namespace.replace( prefix, "", "gi");
                            instance.addSubscription( member, child );
                        }
                    );

                    indx++;
                });
        }
    };

    this.li = function( fqn, element, value ) {
        $(element).text( value );
    };
};

## test.html
<html>
  <head>
    <script src="/scripts/binder.js" type="text/javascript"></script>
    <script src="/scripts/underscore-min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-1.6.2.min.js"
            type="text/javascript"></script>
    <script src="/scripts/postal.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

     var alex =
      {
        "firstname" : "Alex ",
        "lastname" : "Robson",
        "hobbies" :
        [
            "CODE ALL THE THINGS",
            "Watching my stories",
            "Reading"
        ],
        "relatives":
        [
            {"firstname" : "Ian", "lastname" : "Robson" },
            {"firstname" : "Sean", "lastname" : "Robson" },
        ]
      };

      $(function() {
      var writer = new DomWriter($("#person"), "person");
      writer.write( "person", alex );
      postal.publish( "binding", "hobbies.0", "Taking big dumps." );
      });
    </script>

  </head>
  <body>
    <div id="person">
      <!--<span id="firstname"></span>-->
      <!--<span id="lastname"></span>-->
      <input type="text" id="firstname" />
      <input type="text" id="lastname" />
      <ul id="hobbies">
        <li></li>
      </ul>
      <ul id="relatives">
        <li>
          <span id="firstname"></span>
          <span id="lastname"></span>
        </li>
      </ul>
    </div>
  </body>
</html>
	var DomWriter = function (target, namespace) {
	var instance = this;
	var template = namespace;

	var coalesce = function( value, defaultValue ) {
	return typeof(value) != 'undefined' ?
	value : defaultValue;
	};

	this.isObject = function( value ) {
	return typeof(value) === 'object';
	};

	this.addSubscription = function( path, element ) {
	postal.subscribe( "binding", path, function( msg ) {
	instance.write( path, msg );
	});
	if( _(instance[path]).isUndefined() ) {
	instance[path] = element;
	}
	};

	this.crawl = function( namespace, element, callback ) {
	_(element)
	.chain()
	.keys()
	.each( function( key ) {
	var child = element[key];
	var fqn = namespace === "" ?
	key : namespace + "." + key;
	callback( namespace, key, child );
	if( !_.isNull( child ) && instance.isObject( child ) ) {
	instance.crawl( fqn, child, callback );
	}
	});
	};

	this.domCrawl = function( namespace, element, callback ) {
	var id = coalesce( element["id"], "" );
	var fqn = namespace == "" ?
	id : ( id === "" ? namespace : namespace + "." + id );
	callback( fqn, id, element );
	if( element.children !== undefined &&
	element.children.length > 0 ) {
	_(element.children)
	.chain()
	.each( function( child ) {
	instance.domCrawl(
	fqn,
	child,
	callback );
	});
	}
	};

	this.domCrawl( "", target[0], function( namespace, key, child ) {
	var prefix = template + ".";
	var member = namespace === template ?
	namespace : namespace.replace( prefix, "", "gi");
	instance.addSubscription( member, child );
	});

	this.write = function( path, value ) {
	element = this[path];
	this[$(element)[0].tagName.toLowerCase()]
	( path, element, value );
	};

	this.div = function( fqn, element, value ) {
	if( instance.isObject( value ) ) {
	instance.crawl( "", value, function( namespace, key, child ) {
	instance.write(
	namespace === "" ? key : namespace + "." + key,
	child );
	});
	}
	else {
	$(element).text( value );
	}
	};

	this.span = function( fqn, element, value ) {
	$(element).text( value );
	};

	this.input = function( fqn, element, value ) {
	$(element).val( value );
	};

	this.ul = function( fqn, element, value ) {
	var children = $(element).children("li");
	if( children.length < value.length ) {
	$(element).empty();
	var li = children[0];
	var indx = 0;
	_(value)
	.each( function( child ) {
	var newLi = $(li)
	.clone()
	.attr( "id", indx )
	.appendTo( element );
	instance[ fqn + "." + indx ] = newLi[0];

	instance.domCrawl(
	fqn,
	newLi[0],
	function( namespace, key, child ) {
	var prefix = template + ".";
	var member = namespace === template ?
	namespace : namespace.replace( prefix, "", "gi");
	instance.addSubscription( member, child );
	}
	);

	indx++;
	});
	}
	};

	this.li = function( fqn, element, value ) {
	$(element).text( value );
	};
	};
	<html>
	<head>
	<script src="/scripts/binder.js" type="text/javascript"></script>
	<script src="/scripts/underscore-min.js" type="text/javascript"></script>
	<script src="/scripts/jquery-1.6.2.min.js"
	type="text/javascript"></script>
	<script src="/scripts/postal.js" type="text/javascript"></script>

	<script type="text/javascript" language="javascript">

	var alex =
	{
	"firstname" : "Alex ",
	"lastname" : "Robson",
	"hobbies" :
	[
	"CODE ALL THE THINGS",
	"Watching my stories",
	"Reading"
	],
	"relatives":
	[
	{"firstname" : "Ian", "lastname" : "Robson" },
	{"firstname" : "Sean", "lastname" : "Robson" },
	]
	};

	$(function() {
	var writer = new DomWriter($("#person"), "person");
	writer.write( "person", alex );
	postal.publish( "binding", "hobbies.0", "Taking big dumps." );
	});
	</script>

	</head>
	<body>
	<div id="person">
	<!--<span id="firstname"></span>-->
	<!--<span id="lastname"></span>-->
	<input type="text" id="firstname" />
	<input type="text" id="lastname" />
	<ul id="hobbies">
	<li></li>
	</ul>
	<ul id="relatives">
	<li>
	<span id="firstname"></span>
	<span id="lastname"></span>
	</li>
	</ul>
	</div>
	</body>
	</html>