Support for jQuery 1.5. Previous versions of Data Link will NOT work …

…correctly with jQuery 1.5. Provides a .setField() method to replace the .data() method, which has been modified in jQuery 1.5.
BorisMoore · Feb 1, 2011 · f2b13ff · f2b13ff
1 parent 7862f45
commit f2b13ff
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -5,14 +5,21 @@ Documentation for the _jQuery Data Link_ plugin can be found on the jQuery docum
 
 <p>
 ==================================== WARNING ====================================<br/>
-Note: This plugin currently depends on jQuery version 1.4.3.<br/>
+<b>Note:</b> <br/>
+
+In jQuery 1.5 the behavior of the <i>$( somePlainObject ).data()</i> method has been changed. 
+
+This build of the <i>jQuery DataLink</i> plugin will work with both jQuery 1.5, and previous builds of jQuery.
+
+It provides a new <i>$( somePlainObject ).setField()</i> method, which should be used instead of <i>.data()</i>,
+for modifying field values on plain objects and triggering data linking.
 =================================================================================
 </p>
 
 
 <h1>Introduction</h1>
 <p>
-This proposal describes how support for "data linking" can be added to the jQuery core library. The term "data linking" is used here to mean "automatically linking the field of an object to another field of another object." That is to say, the two objects are "linked" to each other, where changing the value of one object (the 'source') automatically updates the value in the other object (the 'target').
+This is the official jQuery DataLink plugin. The term "data linking" is used here to mean "automatically linking the field of an object to another field of another object." That is to say, the two objects are "linked" to each other, where changing the value of one object (the 'source') automatically updates the value in the other object (the 'target').
 </p>
 
 <h2>jQuery(..).link() API</h2>
@@ -22,14 +29,29 @@ The link API allows you to very quickly and easily link fields of a form to an o
 </p>
 
 <pre>
-var person = {};
+&lt;script>
-$("form").link(person);
+$().ready(function() {
-$("#name").val("foo");
+	var person = {};
-alert(person.name); // foo
+	$("form").link(person);
-// ... user changes value ...
+
-alert(person.name); // &lt;user typed value&gt;
+	$("[name=name]").val("NewValue"); // Set firstName to a value.
-$(person).data("name", "bar");
+	alert(person.name); // NewValue
-alert($("#name").val()); // bar
+
+	$(person).setField("name", "NewValue");
+	alert($("[name=name]").val()); // NewValue
+
+	// ... user changes value ...
+	$("form").change(function() {
+		// &lt;user typed value&gt;
+		alert(person.name); 
+	});	
+});
+&lt;/script>
+
+&lt;form name="person">
+	&lt;label for="name">Name:&lt;/label>
+	&lt;input type="text" name="name" id="name" />
+&lt;/form>
 </pre>
 
 <p>
@@ -60,22 +82,41 @@ Often times, it is necessary to modify the value as it flows from one side of a
 <p>
 The plugin comes with one converter named "!" which negates the value.
 </p>
+
 <pre>
-var person = {};
+&lt;script>
-$.convertFn.round = function(value) {
+$().ready(function() {
-    return Math.round( Math.parseFloat( value ) );
+	var person = {};
-}
+
-$("#age").link(person, {
+	$.convertFn.round = function(value) {
-	age: {
+		return Math.round( parseFloat( value ) );
-		convert: "round"
 	}
+
+	$("#age").link(person, {
+		age: {
+			convert: "round"
+		}
+	});
+
+	/* Once the user enters their age, the change event will fire which, in turn, will
+	 * cause the round function to be called. This will then round the age up or down, 
+	 * set the rounded value on the object which will then cause the input field to be 
+	 * updated with the new value.
+	 */
+	$("#age").change(function() {
+		alert(person.age);
+	});
 });
-$("#name").val("7.5");
+&lt;/script>
-alert(person.age); // 8
+
+&lt;form name="person">
+	&lt;label for="age">Age:&lt;/label>
+	&lt;input type="text" name="age" id="age" />
+&lt;/form>
 </pre>
 
 <p>
-It is nice to reuse converters by naming them this way. But you may also specified the converter directly as a function.
+It is convenient to reuse converters by naming them this way. But you may also specify the converter directly as a function.
 </p>
 
 <pre>
@@ -87,6 +128,7 @@ $("#age").link(person, {
 		}
 	}
 });
+
 $("#name").val("7.5");
 alert(person.age); // 8
 </pre>
@@ -126,7 +168,7 @@ $("#rank").link(product, {
 		}
 	}
 });
-$(product).data("salesRank", 12);
+$(product).setField("salesRank", 12);
 alert($("#rank").height()); // 24
 </pre>
 <p>

diff --git a/demos/demo-contacts.js b/demos/demo-contacts.js
@@ -61,7 +61,7 @@ function refresh() {
 				}
 			}
 		});
-		$( contact ).trigger( "changeData", ["age", contact.age] );
+		$( contact ).trigger( "changeField", ["age", contact.age] );
 
 		// todo: "update" feature
 
@@ -73,8 +73,8 @@ function refresh() {
 			original_lastName = contact.lastName;
 		$( ".contact-reset", this ).click( function() {
 			$( contact )
-				.data( "firstName", original_firstName )
+				.setField( "firstName", original_firstName )
-				.data( "lastName", original_lastName );
+				.setField( "lastName", original_lastName );
 		});
 
 		$( "tr.phone", this ).each( function(i) {

diff --git a/jquery.datalink.js b/jquery.datalink.js
@@ -6,24 +6,17 @@
  * Dual licensed under the MIT or GPL Version 2 licenses.
  * http://jquery.org/license
  */
-(function($){
+(function( $, undefined ){
 
 var oldcleandata = $.cleanData,
 	links = [],
 	fnSetters = {
 		val: "val",
 		html: "html",
 		text: "text"
-	};
+	},
-
+	eventNameSetField = "setField",
-function setValue(target, field, value) {
+	eventNameChangeField = "changeField";
-	if ( target.nodeType ) {
-		var setter = fnSetters[ field ] || "attr";
-		$(target)[setter](value);
-	} else {
-		$(target).data( field, value );
-	}
-}
 
 function getLinks(obj) {
 	var data = $.data( obj ),
@@ -33,10 +26,10 @@ function getLinks(obj) {
 }
 
 function bind(obj, wrapped, handler) {
-	wrapped.bind( obj.nodeType ? "change" : "changeData", handler );
+	wrapped.bind( obj.nodeType ? "change" : eventNameChangeField, handler );
 }
 function unbind(obj, wrapped, handler) {
-	wrapped.unbind( obj.nodeType ? "change" : "changeData", handler );
+	wrapped.unbind( obj.nodeType ? "change" : eventNameChangeField, handler );
 }
 
 $.extend({
@@ -72,12 +65,30 @@ $.extend({
 		"!": function(value) {
 			return !value;
 		}
+	},
+	setField: function(target, field, value) {
+		if ( target.nodeType ) {
+			var setter = fnSetters[ field ] || "attr";
+			$(target)[setter](value);
+		} else {
+			var parts = field.split(".");
+			parts[1] = parts[1] ? "." + parts[1] : "";
+
+				var $this = jQuery( target ),
+					args = [ parts[0], value ];
+
+			$this.triggerHandler( eventNameSetField + parts[1] + "!", args );
+			if ( value !== undefined ) {
+				target[ field ] = value;
+			}
+			$this.triggerHandler( eventNameChangeField + parts[1] + "!", args );
+		}
 	}
 });
 
-function getMapping(ev, changed, newvalue, map, source, target) {
+function getMapping(ev, changed, newvalue, map) {
 	var target = ev.target,
-		isSetData = ev.type === "changeData",
+		isSetData = ev.type === eventNameChangeField,
 		mappedName,
 		convert,
 		name;
@@ -138,7 +149,7 @@ $.extend($.fn, {
 						value = convert( value, ev.target, target );
 					}
 					if ( value !== undefined ) {
-						setValue( target, name, value );
+						$.setField( target, name, value );
 					}
 				}
 			},
@@ -158,7 +169,7 @@ $.extend($.fn, {
 							newvalue = convert( newvalue, target, this );
 						}
 						if ( newvalue !== undefined ) {
-							setValue( this, "val", newvalue );
+							$.setField( this, "val", newvalue );
 						}
 					});
 				}
@@ -235,6 +246,11 @@ $.extend($.fn, {
 				}
 			}
 		});
+	},
+	setField: function(field, value) {
+		return this.each(function() {
+			jQuery.setField( this, field, value );
+		});
 	}
 });