Commit 81 (v0.9.81 - Beta)

Feature improvements:

- Custom tag control improvements (documentation to follow soon):
  tag.linkedElement property
  onBind event
  onUnbind event
  onAfterLink signature: (tagCtx, linkCtx, tag.ctx, ev, eventArgs)
  Improvements to tag controls based on JQueryUI widgets (with updated
  jsviews-jqueryui-widgets.js providing support for jQuery UI 1.12.1, including
  new {{controlgroup}} and {{checkboxradio}} tag controls based on corresponding
  widgets

Breaking Change:

- The undocumented onBeforeLink and onAfterBind events on custom tag controls
  have been removed

Documentation:

- New documentation topic on data-linking using tag bindings:
  http://www.jsviews.com/#link-tags

Bug fixes:

- #346
- Several minor bug fixes

Unit tests:

- Several additional unit tests

Author: BorisMoore

jquery.observable.js

@@ -1,4 +1,4 @@
-/*! JsObservable v0.9.80 (Beta): http://jsviews.com/#jsobservable */
+/*! JsObservable v0.9.81 (Beta): http://jsviews.com/#jsobservable */
 /*
  * Subcomponent of JsViews
  * Data change events for data-linking
@@ -44,7 +44,7 @@ if (!$ || !$.fn) {
 	throw "JsObservable requires jQuery"; // We require jQuery
 }
 
-var versionNumber = "v0.9.74",
+var versionNumber = "v0.9.81",
 	$observe, $observable,
 
 	$views = $.views =

jquery.observable.min.js

@@ -1,4 +1,4 @@
-/*! jquery.views.js v0.9.80 (Beta): http://jsviews.com/ */
+/*! jquery.views.js v0.9.81 (Beta): http://jsviews.com/ */
 /*
  * Interactive data-driven views using JsRender templates.
  * Subcomponent of JsViews
@@ -44,7 +44,7 @@ var setGlobals = $ === false; // Only set globals if script block in browser (no
 jsr = jsr || setGlobals && global.jsrender;
 $ = $ || global.jQuery;
 
-var versionNumber = "v0.9.80",
+var versionNumber = "v0.9.81",
 	requiresStr = "JsViews requires ";
 
 if (!$ || !$.fn) {
@@ -166,7 +166,7 @@ function elemChangeHandler(ev, params, sourceValue) {
 					// The binding has a 'to' field, which is of the form [[targetObject, toPath], cvtBack]
 					linkCtx = binding.linkCtx;
 					view = linkCtx.view;
-					tag = linkCtx.tag;
+					tag = linkCtx.tag || view.tag;
 					$source = $(source);
 					onBeforeChange = view.hlp(onBeforeChangeStr); // TODO Can we optimize this and other instances of same?
 					onAfterChange = view.hlp(onAfterChangeStr); // TODO Can we optimize this and other instances of same
@@ -298,10 +298,7 @@ function propertyChangeHandler(ev, eventArgs, linkFn) {
 					// onUpdate returned false, or attr === "none", or this is an update coming from the tag's own change event
 					// - so don't refresh the tag: we just use the new tagCtxs merged from the sourceValue,
 					// (which may optionally have been modifed in onUpdate()...) and then bind, and we are done
-					if (attr === HTML && tag.onBeforeLink) {
-						tag.onBeforeLink();
-					}
-					callAfterLink(tag);
+					callAfterLink(tag, ev, eventArgs);
 					observeAndBind(linkCtx, source, target);
 					view.linkCtx = oldLinkCtx;
 					return;
@@ -310,6 +307,10 @@ function propertyChangeHandler(ev, eventArgs, linkFn) {
 					return;
 				}
 
+				if (tag.onUnbind) {
+					tag.onUnbind(tag.tagCtx, linkCtx, tag.ctx, ev, eventArgs);
+				}
+
 				sourceValue = tag.tagName === ":" // Call convertVal if it is a {{cvt:...}} - otherwise call renderTag
 					? $sub._cnvt(tag.cvt, view, sourceValue[0])
 					: $sub._tag(tag, view, view.tmpl, sourceValue, true, onError);
@@ -335,7 +336,7 @@ function propertyChangeHandler(ev, eventArgs, linkFn) {
 
 			if (tag) {
 				tag._er = hasError;
-				callAfterLink(tag, eventArgs);
+				callAfterLink(tag, ev, eventArgs);
 			}
 		}
 
@@ -410,14 +411,12 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 
 	if (tag) {
 		// Initialize the tag with element references
+		tag._.unlinked = true; // Set to unlinked, so initialization is triggered after re-rendering, e.g. for setting linkedElem, and calling onBind
 		tag.parentElem = tag.parentElem || (linkCtx.expr || tag._elCnt) ? target : targetParent;
 		prevNode = tag._prv;
 		nextNode = tag._nxt;
 	}
 	if (!renders) {
-		if (attr === HTML && tag && tag.onBeforeLink) {
-			tag.onBeforeLink();
-		}
 		return;
 	}
 
@@ -530,9 +529,6 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 					// Remove HTML nodes
 					$(nodesToRemove).remove(); // Note if !tag._elCnt removing the nodesToRemove will process and dispose view and tag bindings contained within the updated tag control
 
-					if (tag && tag.onBeforeLink) {
-						tag.onBeforeLink();
-					}
 					// Insert and link new content
 					promise = view.link(view.data, target, prevNode, nextNode, sourceValue, tag && {tag: tag._tgId, lazyLink: tag.tagCtx.props.lazyLink});
 				} else {
@@ -541,9 +537,6 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 					if (renders) {
 						$target.empty();
 					}
-					if (tag && tag.onBeforeLink) {
-						tag.onBeforeLink();
-					}
 					if (renders) {
 						promise = view.link(source, target, prevNode, nextNode, sourceValue, tag && {tag: tag._tgId});
 					}
@@ -800,7 +793,7 @@ function observeAndBind(linkCtx, source, target) { //TODO? linkFnArgs) {;
 
 	if (tag) {
 		// Use the 'depends' paths set on linkCtx.tag - which may have been set on declaration
-		// or in events: init, render, onBeforeLink, onAfterLink etc.
+		// or in events: init, render, onAfterLink etc.
 		depends = tag.depends || depends;
 		depends = $isFunction(depends) ? tag.depends(tag) : depends;
 		linkedElem = tag.linkedElem;
@@ -854,20 +847,13 @@ function observeAndBind(linkCtx, source, target) { //TODO? linkFnArgs) {;
 			bindTo(binding, tag, linkedElem && linkedElem[0] || target, cvtBk);
 		}
 		if (tag) {
-			if (tag.onAfterBind) {
-				tag.onAfterBind(binding);
-			}
 			if (!tag.flow && !tag._.inline) {
 				target.setAttribute(jsvAttrStr, (target.getAttribute(jsvAttrStr)||"") + "#" + bindId + "^/" + bindId + "^");
 				tag._tgId = "" + bindId;
 			}
 		}
 	}
 	if (linkedElem && linkedElem[0]) {
-		if (tag._.radio) {
-			linkedElem = linkedElem.find(RADIOINPUT);
-		}
-
 		l = linkedElem.length;
 		while (l--) {
 			linkedElem[l]._jsvBnd = linkedElem[l]._jsvBnd || (target._jsvBnd + "+");
@@ -1421,9 +1407,6 @@ function viewLink(outerData, parentNode, prevNode, nextNode, html, refresh, cont
 							tag._prv = elem;
 						}
 						tag._elCnt = linkInfo.elCnt;
-						if (tag.onBeforeLink) {
-							tag.onBeforeLink();
-						}
 						// We data-link depth-first ("on the way in"), which is better for perf - and allows setting parent tags etc.
 						view = tag.tagCtx.view;
 						addDataBinding(undefined, tag._prv, view, linkInfo.id);
@@ -1634,11 +1617,11 @@ function addDataBinding(linkMarkup, node, currentView, boundTagId, isLink, data,
 			attr = tokens[1];
 			tagExpr = tokens[3];
 			while (linkExpressions[0] && linkExpressions[0][4] === "else") { // If this is {someTag...} and is followed by an {else...} add to tagExpr
-				tagExpr += "}{" + linkExpressions.shift()[3];
+				tagExpr += delimCloseChar1 + delimOpenChar0 + linkExpressions.shift()[3];
 				hasElse = true;
 			}
 			if (hasElse) { // If an {else} has been added, need also to add closing {{/someTag}}
-				tagExpr += "}{{/" + tokens[4] + "}";
+				tagExpr += delimCloseChar1 + delimOpenChar0 + delimOpenChar1 + "/" + tokens[4] + delimCloseChar0;
 			}
 			linkCtx = {
 				type: isLink ? "top" : "link",
@@ -1792,54 +1775,60 @@ function normalizeLinkTag(linkMarkup, twoway) {
 // Methods for views and tags
 //===========================
 
-function callAfterLink(tag, eventArgs) {
-	var $linkedElem, linkedElem, radioButtons, val, l, linkedTag, oldTrig, newTrig,
+function callAfterLink(tag, ev, eventArgs) {
+	var $linkedElem, linkedElem, radioButtons, val, l, linkedTag, oldTrig, newTrig, tagProps, propsExpr, linkedElemView, prop, propDef,
 		tagCtx = tag.tagCtx,
 		view = tagCtx.view,
 		props = tagCtx.props,
 		linkCtx = tag.linkCtx;
 
+	if (tag._.unlinked) { // First call to onAfterLink, or first call after onUpdate: updateContent. Initialize and call onBind and set properties
+		if (tag.linkedElement !== undefined) {
+			// linkedElement: - selector for identifying linked element in template/rendered content
+			tag.linkedElem = tag._.inline ? tag.contents(true, tag.linkedElement || "*").first() : $(linkCtx.elem);
+		}
+		if (tag.onBind) {
+			tag.onBind(tagCtx, linkCtx, tag.ctx, ev, eventArgs);
+		}
+	}
+
 	if (tag.onAfterLink) {
-		tag.onAfterLink(tagCtx, linkCtx, eventArgs);
+		tag.onAfterLink(tagCtx, linkCtx, tag.ctx, ev, eventArgs);
 	}
+
 	tag._.unlinked = undefined;
 	$linkedElem = tag.targetTag ? tag.targetTag.linkedElem : tag.linkedElem;
-	if (!tag.noVal && (linkedElem = $linkedElem && $linkedElem[0])) {
-		if (radioButtons = tag._.radio) {
-			$linkedElem = $linkedElem.find(RADIOINPUT);
-		}
-		if (radioButtons || !tag._.chging) {
-			val = tag.cvtArgs()[0];
+	if (linkedElem = $linkedElem && $linkedElem[0]) {
+		if (!tag.noVal) {
+			if (!tag._.chging) {
+				val = tag.cvtArgs()[0];
 
-			if (radioButtons || linkedElem !== linkCtx.elem) {
-				l = $linkedElem.length;
-				while (l--) {
-					linkedElem = $linkedElem[l];
-					linkedTag = linkedElem._jsvLkEl;
-					if (tag._.inline && (!linkedTag || linkedTag !== tag && linkedTag.targetTag !== tag)) {
-						// For data-linked tags, identify the linkedElem with the tag, for "to" binding
-						// (For data-linked elements, if not yet bound, we identify later when the linkCtx.elem is bound)
-						linkedElem._jsvLkEl = tag;
-						bindTo(bindingStore[tag._tgId], tag, linkedElem);
-						linkedElem._jsvBnd = "&" + tag._tgId + "+"; // Add a "+" for cloned binding - so removing
-						// elems with cloned bindings will not remove the 'parent' binding from the bindingStore.
-					}
-					if (radioButtons) {
-						// For radio button, set to if val === value. For others set val() to val, below
-						linkedElem[CHECKED] = val === linkedElem.value;
+				if (linkedElem !== linkCtx.elem) {
+					l = $linkedElem.length;
+					while (l--) {
+						linkedElem = $linkedElem[l];
+						linkedTag = linkedElem._jsvLkEl;
+						if (tag._.inline && (!linkedTag || linkedTag !== tag && linkedTag.targetTag !== tag)) {
+							// For data-linked tags, identify the linkedElem with the tag, for "to" binding
+							// (For data-linked elements, if not yet bound, we identify later when the linkCtx.elem is bound)
+							linkedElem._jsvLkEl = tag;
+							bindTo(bindingStore[tag._tgId], tag, linkedElem);
+							linkedElem._jsvBnd = "&" + tag._tgId + "+"; // Add a "+" for cloned binding - so removing
+							// elems with cloned bindings will not remove the 'parent' binding from the bindingStore.
+						}
 					}
+					linkCtx._val = val;
 				}
-				linkCtx._val = val;
-			}
-			if (val !== undefined) {
-				if (!radioButtons && linkedElem.value !== undefined) {
-					if (linkedElem.type === CHECKBOX) {
-						linkedElem[CHECKED] = val && val !== "false";
-					} else {
-						$linkedElem.val(val);
+				if (val !== undefined) {
+					if (linkedElem.value !== undefined) {
+						if (linkedElem.type === CHECKBOX) {
+							linkedElem[CHECKED] = val && val !== "false";
+						} else if (linkedElem.type === "text") {
+							linkedElem.value = val;
+						}
+					} else if (linkedElem.contentEditable === TRUE) {
+						linkedElem.innerHTML = val;
 					}
-				} else if (linkedElem.contentEditable === TRUE) {
-					linkedElem.innerHTML = val;
 				}
 			}
 		}
@@ -1851,7 +1840,14 @@ function callAfterLink(tag, eventArgs) {
 				$linkedElem.width(props.width);
 			}
 		}
+		if (props.title !== undefined) {
+			$linkedElem.attr("title", props.title);
+		}
 		if (props["class"]) {
+			// This code supports dynamic binding to class - where it adds the class if absent, and removes/adds if a previous value is present
+			if (eventArgs && $linkedElem.hasClass(eventArgs.oldValue)) {
+				$linkedElem.removeClass(eventArgs.oldValue);
+			}
 			$linkedElem.addClass(props["class"]);
 		}
 		if (props.id) {
@@ -1887,6 +1883,8 @@ function bindTo(binding, tag, linkedElem, cvtBk) {
 		source = linkCtx.data,
 		paths = linkCtx.fn.paths;
 
+	tag = tag || linkedElem._jsvLkEl;
+
 	if (binding && paths) {
 		oldTrig = linkedElem._jsvTr || false;
 		if (tag) {
@@ -2064,6 +2062,9 @@ function removeViewBinding(bindId, linkedElemTag, elem) {
 				}
 				$linkedElem = tag.linkedElem;
 
+				if (tag.onUnbind) {
+					tag.onUnbind(tag.tagCtx, linkCtx, tag.ctx, true);
+				}
 				if (tag.onDispose) {
 					tag.onDispose();
 				}
@@ -2615,6 +2616,7 @@ $converters.merge = function(val) {
 
 $tags("on", {
 	attr: NONE,
+	noVal: true, // This tag control does not bind to arg[0] - no default binding to current #data context
 	init: function(tagCtx) {
 		var content,
 			tag = this,
@@ -2636,7 +2638,7 @@ $tags("on", {
 	},
 	render: function() {
 		var tagCtx = this.tagCtx;
-		return tagCtx.render(tagCtx.view, true); // no arg, so renders against parentView.data
+		return this._.inline && tagCtx.render(tagCtx.view, true); // no arg, so renders against parentView.data
 	},
 	onAfterLink: function(tagCtx, linkCtx) {
 		var handler, params, find, activeElem,
@@ -2659,17 +2661,18 @@ $tags("on", {
 				? (tag._sel = args[1] || "*", tag.parentElem)
 				// If inline, attach to child elements of tag parent element (filtered by selector argument if provided.
 				// (In handler we'll filter out events from sibling elements preceding or following tag.)
+				// This allows us to use the delegated pattern where the attached event works even for added elements satisfying the selector
 				: linkCtx.elem);
 
 			if (!contextOb) {
 				// Get the path for the preceding object (context object) of handler (which is the last arg), compile function
 				// to return that context object, and run compiled function against data
 				contextOb = /^(.*)[\.^][\w$]+$/.exec(tagCtx.params.args.slice(-params.length - 1)[0]);
-				contextOb = contextOb && $sub.tmplFn("{:" + contextOb[1] + "}", view.tmpl, true)(linkCtx.data, view);
+				contextOb = contextOb && $sub.tmplFn(delimOpenChar1 + ":" + contextOb[1] + delimCloseChar0, view.tmpl, true)(linkCtx.data, view);
 			}
 
 			if (tag._evs) {
-				tag.onDispose();
+				tag.onUnbind();
 			}
 
 			activeElem.on(
@@ -2706,7 +2709,7 @@ $tags("on", {
 	onUpdate: function() {
 		return false;
 	},
-	onDispose: function() {
+	onUnbind: function() {
 		var self = this;
 		if (self.activeElem) {
 			self.activeElem.off(self._evs, self._sel, self._hlr);
@@ -2717,11 +2720,11 @@ $tags("on", {
 });
 
 $extend($tags["for"], {
-	//onUpdate: function(ev, eventArgs, tagCtxs) {
+	//onUpdate: function(ev, eventArgs, newTagCtxs) {
 		//Consider adding filtering for perf optimization. However the below prevents update on some scenarios which _should_ update - namely when there is another array on which for also depends.
 		//var i, l, tci, prevArg;
 		//for (tci = 0; (prevArg = this.tagCtxs[tci]) && prevArg.args.length; tci++) {
-		//	if (prevArg.args[0] !== tagCtxs[tci].args[0]) {
+		//	if (prevArg.args[0] !== newTagCtxs[tci].args[0]) {
 		//		return true;
 		//	}
 		//}
@@ -2795,10 +2798,10 @@ $extend($tags["for"], {
 });
 
 $extend($tags["if"], {
-	onUpdate: function(ev, eventArgs, tagCtxs) {
+	onUpdate: function(ev, eventArgs, newTagCtxs) {
 		var tci, prevArg, different;
 		for (tci = 0; (prevArg = this.tagCtxs[tci]); tci++) {
-			different = prevArg.props.tmpl !== tagCtxs[tci].props.tmpl || prevArg.args.length && !(prevArg = prevArg.args[0]) !== !tagCtxs[tci].args[0];
+			different = prevArg.props.tmpl !== newTagCtxs[tci].props.tmpl || prevArg.args.length && !(prevArg = prevArg.args[0]) !== !newTagCtxs[tci].args[0];
 			if ((!this.convert && !!prevArg) || different) {
 				return different;
 				// If there is not a change of template, and there is no converter, and newArg and prevArg are both truthy, return false to cancel update.
@@ -2810,7 +2813,7 @@ $extend($tags["if"], {
 		// Boolean value of all args are unchanged (falsey), so return false to cancel update
 		return false;
 	},
-	onAfterLink: function(tagCtx, linkCtx, eventArgs) {
+	onAfterLink: function(tagCtx, linkCtx, ctx, ev, eventArgs) {
 		if (eventArgs) {
 			this.domChange(tagCtx, linkCtx, eventArgs);
 		}
@@ -3050,7 +3053,7 @@ $views.getCtx = function(param) { // Return value of ctx.foo, including for comp
 
 $sub._cp = function(paramVal, params, view) { // Get compiled contextual parameters (or properties) ~foo=expr.
 	if (view.linked) { // In JsViews, returns [view, linkFn] where linkFn is compiled function for expression
-		params = "{:" + params + "}";
+		params = delimOpenChar1 + ":" + params + delimCloseChar0;
 		var tmpl = view.tmpl,
 			links = topView.tmpl.links, // Use topView links, as for compiled top-level linking expressions. To do - should this ever get disposed?
 			linkFn = links[params];