Made datalink.html show more aspects of API.

Working towards support of hierarchical declarative binding.

Author: BorisMoore

beta2/datalink.html

@@ -18,7 +18,7 @@
 	<button onclick="setCity()">set city</button>
 	<hr /><br />
 
-	<div id="myContainer">
+	<div id="myDeclarative">
 		<p data-jq-bind="css-background-color: roleColor">
 			Name: <span data-jq-bind="firstName, css-background-color: roleColor"></span> <span data-jq-bind="lastName"></span>
 		</p>
@@ -28,6 +28,20 @@
 			<input data-jq-link="address.city" data-jq-bind="address.city" />
 			<input data-jq-link="roleColor" data-jq-bind="roleColor" />
 		</p>
+		<p>
+			<span data-jq-bind="nameConvert( firstName )"></span>
+			<span data-jq-bind="address.city"></span>
+		</p>
+
+	</div>
+
+	<div id="myExplicit">
+		<p class="cityWrapper">
+			City: <span class="city"></span>
+		</p>
+		<p>
+			<input name="city" />
+		</p>
 	</div>
 
 	<br /><hr />
@@ -40,34 +54,61 @@
 				firstName: "Jo",
 				lastName: "Proctor",
 				address: {
-					city: "Redmond",
+					city: "Redmond"
 				},
 				roleColor: "yellow"
 			},
 			person2 = {
 				firstName: "Jo2",
 				lastName: "Proctor2",
 				address: {
-					city: "Redmond2",
+					city: "Redmond2"
 				},
 				roleColor: "green"
 			},
 			person3 = {
 				firstName: "Jo3",
 				lastName: "Proctor3",
 				address: {
-					city: "Redmond3",
+					city: "Redmond3"
 				},
 				roleColor: "red"
 			};
 
-		$.dataLink( person, "#myContainer" ).push();
+		$.dataLink( person, "#myDeclarative" ).push();
 
-		$.dataLink( "#myContainer", person );
+		$.dataLink( "#myDeclarative", person );
 
 		$.dataLink( person, person2 );
 		$.dataLink( person, person3 ).push();
 
+		$.dataLink( person, "#myExplicit", [
+			{ 
+				from: "address.city",
+				to: ".city"
+			},
+			{ 
+				from: "address.city",
+				to: "input[name = city]"
+			},
+			{ 
+				from: "roleColor",
+				to: ".cityWrapper",
+				toAttr: "css-background-color"
+			},
+			{ 
+				from: "address.city",
+				to: "input[name = city]",
+				toAttr: "title",
+				convert: titleConvert
+			}		
+		]).push();
+
+		$.dataLink( "#myExplicit", person, { 
+			from: "input[name = city]",
+			to: "address.city"
+		});
+
 		function nameConvert( value ) {
 			return value + " lives in";
 		}

beta2/jquery.datalink2.js

@@ -353,7 +353,9 @@ function addBinding( map, from, to, callback, links ) {
 				ev.stopImmediatePropagation();
 			}
 		};
+		
 		var j, l;
+		
 		switch ( fromType + toType ) {
 			case "htmlarray" :
 				for ( j=0, l=toObj.length; j<l; j++ ) {
@@ -368,6 +370,20 @@ function addBinding( map, from, to, callback, links ) {
 				}
 			break;
 
+			case "objecthtml" :
+				if ( thisMap.decl ) {
+					to = to.find( "[ data-jq-bind ]" ).add( to.filter( "[ data-jq-bind ]" ) ); 
+				//	thisMap.to = 0;
+				}
+//	TODO Replace with this style for better perf:
+//	elems = elem.getElementsByTagName("*");
+//	for ( m = elems.length - 1; m >= 0; m-- ) {
+//		processItemKey( elems[m] );
+//	}
+//	processItemKey( elem );
+				from.bind( eventType, handler );
+			break;
+
 			default:
 				from.bind( eventType, handler );
 		}
@@ -416,10 +432,6 @@ function objectType( object ) {
 		: "none";
 }
 
-function declarativeMap( fromType, toType ) {
-	 return !unsupported[ fromType + toType ] && $.extend( {}, decl.from[fromType], decl.to[toType], { decl: true } );
-}
-
 function wrapObject( object ) {
 	return object instanceof $ ? object : $.isArray( object ) ? $( [object] ) : $( object ); // Ensure that an array is wrapped as a single array object
 }
@@ -482,7 +494,7 @@ $.extend({
 			args[3] = args.pop();
 			return $.dataLink.apply( $, args );
 		}
-		var i,
+		var i, fromType, toType,
 			links = [],
 			linkset = {   // TODO Consider exposing as prototype, for extension
 				links: links,
@@ -514,8 +526,17 @@ $.extend({
 		if ( from ) {
 			from = wrapObject( from );
 			to = wrapObject( to );
-
-			if ( maps = maps || declarativeMap( objectType( from[ 0 ]), objectType( to[ 0 ]))) {
+			fromType = objectType( from[ 0 ]);
+			toType = objectType( to[ 0 ]);
+			maps = maps 
+				|| !unsupported[ fromType + toType ] 
+				&& { 
+					decl: true,  
+					from: fromType === "html" ? "input[" + linkAttr + "]" : undefined//,
+		//			to: toType === "html" ? "[" + bindAttr + "]" : undefined
+				};
+
+			if ( maps ) {
 				maps = $.isArray( maps ) ? maps : [ maps ];
 
 				i = maps.length;
@@ -581,18 +602,6 @@ $.extend({
 										// toAttr:               toPath    convert(  toPath  )        end
 					bindInfo.replace( /(?:([\w\-]+)\:\s*)?(?:(?:([\w\.]+)|(\w+)\(\s*([\w\.]+)\s*\))(?:$|,))/g, setTarget );
 				}
-			},
-			from: {
-				object: {},
-				html: {
-					from: "input[" + linkAttr + "]"
-				}
-			},
-			to: {
-				object: {},
-				html: {
-					to: "[" + bindAttr + "]"
-				}
 			}
 		},
 		merge: {