Commit 55 (Beta Candidate)

- New 'trigger' feature:
  Two-way data-linking now allows opting in to additional trigger
  events, so that data updates on every keyup event, as text is
  entered. This applies to data-linked inputs, textareas, and
  content-editable elements, as well as to custom tags, such as
  {{textbox}} which provide two-way binding through linkedElem.
  For example, setting <input data-link="name trigger=true" />
  means that updates to the name property will happen as you type,
  not just on leaving the textbox.

  See unit tests for full range of options on this feature.

- Many new unit tests

- Several minor bug fixes

- All samples updated to take advantage of new 'trigger' feature.

demos/features/observability/computed-data-prototype.html

@@ -30,21 +30,21 @@ <h3>Computed data properties on prototype, using constructor</h3>
 		<tr>
 			<td>first:</td>
 			<td data-link="firstName()"></td>
-			<td><input data-link="firstName()" /></td>
+			<td><input data-link="firstName() trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>last:</td>
 			<td data-link="lastName"></td>
-			<td><input data-link="lastName" /></td>
+			<td><input data-link="lastName trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>full name:</td>
 			<td data-link="fullName()"></td>
-			<td><input data-link="fullName()" /></td>
+			<td><input data-link="fullName() trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>reversed full name:</td>
-			<td colspan="2" data-link="fullName(true)"></td>
+			<td colspan="2" data-link="fullName(true) trigger=true"></td>
 		{{!-- Parameterized setter not yet supported
 			<td><input data-link="fullName(true)" /></td>
 		--}}

demos/features/observability/computed-data.html

@@ -30,21 +30,21 @@ <h3>Computed data properties (declared on instance)</h3>
 		<tr>
 			<td>first:</td>
 			<td data-link="firstName"></td>
-			<td><input data-link="firstName" /></td>
+			<td><input data-link="firstName trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>last:</td>
 			<td data-link="lastName"></td>
-			<td><input data-link="lastName" /></td>
+			<td><input data-link="lastName trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>full name:</td>
 			<td data-link="fullName()"></td>
-			<td><input data-link="fullName()" /></td>
+			<td><input data-link="fullName() trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>reversed full name:</td>
-			<td colspan="2" data-link="fullName(true)"></td>
+			<td colspan="2" data-link="fullName(true) trigger=true"></td>
 		{{!-- Parameterized setter not yet supported
 			<td><input data-link="fullName(true)" /></td>
 		--}}

demos/features/observability/computed-helper.html

@@ -30,17 +30,17 @@ <h3>Computed observables as helper functions (with declared dependencies, and op
 		<tr>
 			<td>first:</td>
 			<td data-link="firstName"></td>
-			<td><input data-link="firstName" /></td>
+			<td><input data-link="firstName trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>last:</td>
 			<td data-link="lastName"></td>
-			<td><input data-link="lastName" /></td>
+			<td><input data-link="lastName trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>full name:</td>
-			<td data-link="~fullName()"></td>
-			<td><input data-link="~fullName()" /></td>
+			<td data-link="~fullName() trigger=true"></td>
+			<td><input data-link="~fullName() trigger=true" /></td>
 		</tr>
 		<tr>
 			<td>reversed full name:</td>

demos/features/observability/observing-paths.html

@@ -46,8 +46,8 @@ <h3>Data-linking to deep paths - observing changes higher up the path</h3>
 			</td>
 		</tr>
 		<tr>
-			<td><input data-link="{:selected^name.first onError=null :} disabled{:!selected}" /></td>
-			<td><input data-link="{:selected^name.last onError=null :} disabled{:!selected}" /></td>
+			<td><input data-link="{:selected^name.first onError=null trigger=true :} disabled{:!selected}" /></td>
+			<td><input data-link="{:selected^name.last onError=null trigger=true :} disabled{:!selected}" /></td>
 		</tr>
 		<tr>
 			<td colspan="2" data-link="selected^name.first + ' ' + selected^name.last onError=null "></td>

demos/jQueryConfDemosOct2011/06_data-binding.html

@@ -23,7 +23,7 @@ <h3>JsViews: Data binding</h3>
 	<tr>
 		<td data-link="firstName"></td>
 		<td>
-			<input data-link="firstName" />
+			<input data-link="firstName trigger=true" />
 		</td>
 	</tr>
 </script>
@@ -48,8 +48,6 @@ <h3>JsViews: Data binding</h3>
 template.link( "#details", people );
 
 // Alternative syntax:
-//    $("#details").link(template, people);
-// or:
 //    $.link(template, "#details", people);
 </script>
 
@@ -77,8 +75,6 @@ <h4>Script:</h4>
 template.link( "#details", people );
 
 // Alternative syntax:
-//    $("#details").link(template, people);
-// or:
 //    $.link(template, "#details", people);
 </pre>
 

demos/jQueryConfDemosOct2011/06_data-binding2.html

@@ -23,7 +23,7 @@ <h3>JsViews: Data binding - compact linking API syntax</h3>
 	<tr>
 		<td data-link="firstName"></td>
 		<td>
-			<input data-link="firstName" />
+			<input data-link="firstName trigger=true" />
 		</td>
 	</tr>
 </script>

demos/jQueryConfDemosOct2011/07_observable.html

@@ -25,7 +25,7 @@ <h3>JsViews: Observable property changes</h3>
 	<tr>
 		<td data-link="firstName"></td>
 		<td>
-			<input data-link="firstName" />
+			<input data-link="firstName trigger=true" />
 		</td>
 	</tr>
 </script>

demos/jQueryConfDemosOct2011/07_observable2.html

@@ -25,7 +25,7 @@ <h3>JsViews: Observable collection changes</h3>
 	<tr>
 		<td data-link="firstName" ></td>
 		<td>
-			<input data-link="firstName" />
+			<input data-link="firstName trigger=true" />
 		</td>
 		<td>
 			<img class="close" src="../resources/close.png" />

demos/jQueryConfDemosOct2011/07_observable3.html

@@ -27,7 +27,7 @@ <h3>JsViews: Two containers data-linked to the same array</h3>
 	<tr>
 		<td data-link="firstName" ></td>
 		<td>
-			<input data-link="firstName" />
+			<input data-link="firstName trigger=true" />
 		</td>
 		<td>
 			<img class="close" src="../resources/close.png" />

demos/jQueryConfDemosOct2011/11_editable-data.html

@@ -48,10 +48,10 @@ <h3>JsViews: Fully editable data: JsViews</h3>
 		{^{for movies[selectedIndex]}}
 			<div>
 				<div class="title">Title:</div>
-				<div><input data-link="title" /></div>
+				<div><input data-link="title trigger=true" /></div>
 				<div class="title">Languages: <span class="addLanguage">Add</span></div>
 				{^{for languages}}
-					<input data-link="name" /><img class="removeLanguage" src="../resources/close.png" />
+					<input data-link="name trigger=true" /><img class="removeLanguage" src="../resources/close.png" />
 				{{/for}}
 			</div>
 		{{/for}}

demos/jQueryConfDemosOct2011/13_converters.html

@@ -41,7 +41,7 @@ <h3>JsRender and JsViews: Use converters for custom encoding, data formatting, l
 	<tr>
 		<td data-link="dayOff"></td>
 		<td data-link="{intToDay:dayOff}"></td>
-		<td><input data-link="{intToDay:dayOff:dayToInt} title{:dayOff}" /></td>
+		<td><input data-link="{intToDay:dayOff trigger=true:dayToInt} title{:dayOff}" /></td>
 	</tr>
 </script>
 

demos/step-by-step/03_top-level-linking.html

@@ -30,15 +30,15 @@ <h3>Data-Linking to static content in the page</h3>
 	</p>
 
 	<p>
-		<input data-link="{:firstName:}" />
-		<input data-link="{:lastName:} title{:~infoSummary(firstName, lastName, address.city, cars.quantity)}" />
-		<input data-link="address.city" />
-		<input data-link="{upper:roleColor:}" />
+		<input data-link="firstName trigger=true" />
+		<input data-link="{:lastName trigger=true:} title{:~infoSummary(firstName, lastName, address.city, cars.quantity)}" />
+		<input data-link="address.city trigger=true" />
+		<input data-link="{upper:roleColor trigger=true:}" />
 	</p>
 
 	<p>Cars:
-		<em>Quantity</em> <input data-link="cars.quantity" />
-		<em>Price</em> <input data-link="cars.price" />
+		<em>Quantity</em> <input data-link="cars.quantity trigger=true" />
+		<em>Price</em> <input data-link="cars.price trigger=true" />
 		<em>Total Value:</em> <span data-link="cars.quantity * cars.price"></span>
 	</p>
 

demos/step-by-step/04_form-elements_if-binding.html

@@ -31,11 +31,11 @@ <h4>Purchase a movie ticket</h4>
 
 		{^{if selectedMovie!=='none'}}
 			<div class="subhead" data-link="{:name ? 'Name:' : 'Type your name here:'}"></div>
-			<div><input data-link="name" placeholder="Enter your name..."/></div>
+			<div><input data-link="name trigger=true" placeholder="Enter your name..."/></div>
 
 			{^{if name}}
 				<div class="subhead" data-link="{:request ? 'Special requests:' : 'Type special requests here:'}"></div>
-				<div><textarea data-link="request" rows="4" cols="25"  placeholder="Enter any special requests..."></textarea></div>
+				<div><textarea data-link="request trigger=true" rows="4" cols="25"  placeholder="Enter any special requests..."></textarea></div>
 			{{/if}}
 		{{/if}}
 	</div>

jquery.observable.js

@@ -1,5 +1,5 @@
 /*! JsObservable v1.0.0-alpha: http://github.com/BorisMoore/jsviews and http://jsviews.com/jsviews
-informal pre V1.0 commit counter: 54 (Beta Candidate) */
+informal pre V1.0 commit counter: 55 (Beta Candidate) */
 /*
  * Subcomponent of JsViews
  * Data change events for data-linking
@@ -23,19 +23,18 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 	var versionNumber = "v1.0.0-alpha",
 
 		$eventSpecial = $.event.special,
-		$viewsSub = $.views
+		$sub = $.views
 			? $.views.sub // jsrender was loaded before jquery.observable
 			: ($observable.sub = {}), // jsrender not loaded so store sub on $observable, and merge back in to $.views.sub in jsrender if loaded afterwards
-		cbBindingKey = 1,
 		splice = [].splice,
 		$isArray = $.isArray,
 		$expando = $.expando,
 		OBJECT = "object",
 		PARSEINT = parseInt,
 		rNotWhite = /\S+/g,
-		propertyChangeStr = $viewsSub.propChng = $viewsSub.propChng || "propertyChange",// These two settings can be overridden on settings after loading
-		arrayChangeStr = $viewsSub.arrChng = $viewsSub.arrChng || "arrayChange",        // jsRender, and prior to loading jquery.observable.js and/or JsViews
-		cbBindingsStore = $viewsSub._cbBnds = $viewsSub._cbBnds || {},
+		propertyChangeStr = $sub.propChng = $sub.propChng || "propertyChange",// These two settings can be overridden on settings after loading
+		arrayChangeStr = $sub.arrChng = $sub.arrChng || "arrayChange",        // jsRender, and prior to loading jquery.observable.js and/or JsViews
+		cbBindingsStore = $sub._cbBnds = $sub._cbBnds || {},
 		observeStr = propertyChangeStr + ".observe",
 		$isFunction = $.isFunction,
 		observeObjKey = 1,
@@ -45,7 +44,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 
 	//========================== Top-level functions ==========================
 
-	$viewsSub.getDeps = function() {
+	$sub.getDeps = function() {
 		var args = arguments;
 		return function() {
 			var arg, dep,
@@ -59,8 +58,8 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 				}
 			}
 			return deps;
-		}
-	}
+		};
+	};
 
 	function $observable(data) {
 		return $isArray(data)
@@ -222,7 +221,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 						},
 						filter: filter,
 						ns: initialNs
-					}
+					};
 				}
 				$(boundObOrArr).on(namespace, null, evData, onObservableChange);
 				if (cbBindings) {
@@ -255,7 +254,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 					}
 				}
 				callback(ev, eventArgs);
-			}
+			};
 		}
 
 		function bindArray(arr, unbind, isArray, relPath) {
@@ -280,7 +279,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 			}
 		}
 
-		var i, p, skip, parts, prop, path, isArray, dep, unobserve, callback, cbId, el, data, events, contextCb, items, cbBindings, depth, innerCb, parentObs,
+		var i, p, skip, parts, prop, path, dep, unobserve, callback, cbId, el, data, events, contextCb, items, cbBindings, depth, innerCb, parentObs,
 			allPath, filter, initialNs, initNsArr, initNsArrLen,
 			allowArray = this != false, // If this === false, this is a call from observeAndBind - doing binding of datalink expressions. We don't bind
 			// arrayChange events in this scenario. Instead, {^{for}} and similar do specific arrayChange binding to the tagCtx.args[0] value, in onAfterLink.
@@ -534,7 +533,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 					}
 				}
 			}
-		}
+		};
 	}
 
 	//========================== Initialize ==========================
@@ -591,7 +590,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 			parentObs = oldParentObs;
 		}
 
-		var l, prop, isObject, newAllPath, newObject;
+		var l, isObject, newAllPath, newObject;
 
 		if (typeof object === OBJECT) {
 			isObject = $isArray(object) ? "" : "*";
@@ -628,7 +627,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 		}
 	}
 
-	$viewsSub.DataMap = DataMap;
+	$sub.DataMap = DataMap;
 	$.observable = $observable;
 	$observable._fltr = function(key, object, allPath, filter) {
 		var prop = (filter && $isFunction(filter)
@@ -641,7 +640,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 				: prop;
 		}
 		return typeof prop === OBJECT && prop;
-	}
+	};
 
 	$observable.Object = ObjectObservable;
 	$observable.Array = ArrayObservable;
@@ -660,7 +659,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 		},
 
 		setProperty: function(path, value, nonStrict) {
-			var leaf, key, pair, parts,
+			var key, pair, parts,
 				self = this,
 				object = self._data;
 
@@ -672,7 +671,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 					key = path.length;
 					while (key--) {
 						pair = path[key];
-						self.setProperty(pair.name, pair.value, nonStrict === undefined || nonStrict) //If nonStrict not specified, default to true;
+						self.setProperty(pair.name, pair.value, nonStrict === undefined || nonStrict); //If nonStrict not specified, default to true;
 					}
 				} else if ("" + path !== path) {
 					// Object representation where property name is path and property value is value.
@@ -692,7 +691,7 @@ informal pre V1.0 commit counter: 54 (Beta Candidate) */
 		},
 
 		removeProperty: function(path) {
-			this.setProperty(path, remove)
+			this.setProperty(path, remove);
 			return this;
 		},