Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Made datalink.html show more aspects of API.

Working towards support of hierarchical declarative binding.
  • Loading branch information...
commit 1b7cd73cfa9401cfa6637c0ccf79fcd680da0f35 1 parent a4a4636
@BorisMoore authored
Showing with 75 additions and 25 deletions.
  1. +47 −6 beta2/datalink.html
  2. +28 −19 beta2/jquery.datalink2.js
View
53 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,7 +54,7 @@
firstName: "Jo",
lastName: "Proctor",
address: {
- city: "Redmond",
+ city: "Redmond"
},
roleColor: "yellow"
},
@@ -48,7 +62,7 @@
firstName: "Jo2",
lastName: "Proctor2",
address: {
- city: "Redmond2",
+ city: "Redmond2"
},
roleColor: "green"
},
@@ -56,18 +70,45 @@
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";
}
View
47 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: {
Please sign in to comment.
Something went wrong with that request. Please try again.