v1.0.2 release

Feature improvement:

- {^{for}} and {^{props}} tags incremental rendering improvements
  - New mapProps property for custom tags, like boundProps, specifying
    args or named props for which observable changes trigger a refresh,
    but here it is an incremental array refresh, not a full tag refresh.

  - New mapDepends property similar to the depends property, specifying
    dependent paths. But here, observable changes on the specified paths
    trigger incremental array refresh, not full tag refresh.

- Sort and Filter handlers both now have tagCtx as this pointer

Bug fixes:

- #414
  updateValue not working correctly for 2-way bound tag properties
  with a path expression containing index [] operator

- #412
  jqueryui accordion create event not triggered

- Several other minor bug fixes

Additional and improved documentation topics and samples...

- See for example: https://www.jsviews.com/#samples/sort-filter

Additional unit tests...

Author: BorisMoore

jquery.observable.js

@@ -1,9 +1,9 @@
-/*! JsObservable v1.0.1: http://jsviews.com/#jsobservable */
+/*! JsObservable v1.0.2: http://jsviews.com/#jsobservable */
 /*
  * Subcomponent of JsViews
  * Data change events for data-linking
  *
- * Copyright 2018, Boris Moore
+ * Copyright 2019, Boris Moore
  * Released under the MIT License.
  */
 
@@ -44,7 +44,7 @@ if (!$ || !$.fn) {
 	throw "JsObservable requires jQuery"; // We require jQuery
 }
 
-var versionNumber = "v1.0.1",
+var versionNumber = "v1.0.2",
 	_ocp = "_ocp", // Observable contextual parameter
 	$observe, $observable,
 
@@ -1058,11 +1058,7 @@ if (!$.observe) {
 				if ((newItem = newItems[j]) === data[j-k]) {
 					insertAdded();
 				} else {
-					for (i=j-k; i<dataLength; i++) {
-						if (newItem === data[i]) {
-							break;
-						}
-					}
+					for (i=j-k; i<dataLength && newItem !== data[i]; i++) {}
 					if (i<dataLength) {
 						insertAdded();
 						num = 0;
@@ -1143,32 +1139,35 @@ if (!$.observe) {
 			}
 			if (typeof source === OBJECT || $isFunction(source)) {
 				map.src = source;
-				if (oldMapOrTarget) {
-					map.tgt = oldMapOrTarget.tgt || oldMapOrTarget; // Can provide an existing map, or a target array to be used on new map
+				if (unbound) {
+					map.tgt = mapDef.getTgt(source, options);
 				} else {
-					map.tgt = map.tgt || [];
-				}
-				map.options = options || map.options;
-				if (updatedMap = map.update()) {
-					map = updatedMap; // If updating returns another map, then we can replace this one (so no need to bind it)
-				} else if (!unbound) {
-					if (mapDef.obsSrc) {
-						$observable(map.src).observeAll(map.obs = function(ev, eventArgs) {
-							if (!changing && !eventArgs.refresh) {
-								changing = true;
-								mapDef.obsSrc(map, ev, eventArgs);
-								changing = undefined;
-							}
-						}, map.srcFlt);
+					if (oldMapOrTarget) {
+						map.tgt = oldMapOrTarget.tgt || $isArray(oldMapOrTarget) && oldMapOrTarget; // Can provide an existing map, or a target array to be used on new map
 					}
-					if (mapDef.obsTgt) {
-						$observable(map.tgt).observeAll(map.obt = function(ev, eventArgs) {
-							if (!changing && !map.tgt._updt) {
-								changing = true;
-								mapDef.obsTgt(map, ev, eventArgs);
-								changing = undefined;
-							}
-						}, map.tgtFlt);
+					map.tgt = map.tgt || [];
+					map.options = options || map.options;
+					if (updatedMap = map.update()) {
+						map = updatedMap; // If updating returns another map, then we can replace this one (so no need to bind it)
+					} else {
+						if (mapDef.obsSrc) {
+							$observable(map.src).observeAll(map.obs = function(ev, eventArgs) {
+								if (!changing && !eventArgs.refresh) {
+									changing = true;
+									mapDef.obsSrc(map, ev, eventArgs);
+									changing = undefined;
+								}
+							}, map.srcFlt);
+						}
+						if (mapDef.obsTgt) {
+							$observable(map.tgt).observeAll(map.obt = function(ev, eventArgs) {
+								if (!changing && !map.tgt._updt) {
+									changing = true;
+									mapDef.obsTgt(map, ev, eventArgs);
+									changing = undefined;
+								}
+							}, map.tgtFlt);
+						}
 					}
 				}
 			}
@@ -1207,6 +1206,22 @@ if (!$.observe) {
 					}
 				}
 			},
+			observe: function(deps, linkCtx) { // Listen to observable changes of mapProps, and call map.update when change happens
+				var map = this,
+					options = map.options;
+				if (map.obmp) {
+					// There is a previous handler observing the mapProps
+					$unobserve(map.obmp);
+				}
+				map.obmp = function() {
+					// Observe changes in the mapProps ("filter", "sort", "reverse", "start", "end")
+					var newTagCtx = linkCtx.fn(linkCtx.data, linkCtx.view, $sub)[options.index]; // Updated tagCtx props and args
+					$.extend(options.props, newTagCtx.props); // Update props to new values
+					options.args = newTagCtx.args; // Update args to new values
+					map.update(); // Update the map target array, based on new mapProp values
+				};
+				$observable._apply(1, linkCtx.data, dependsPaths(deps, linkCtx.tag, map.obmp), map.obmp, linkCtx._ctxCb);
+			},
 			unmap: function() {
 				var map = this;
 				if (map.src && map.obs) {
@@ -1215,6 +1230,9 @@ if (!$.observe) {
 				if (map.tgt && map.obt) {
 					$observable(map.tgt).unobserveAll(map.obt, map.tgtFlt);
 				}
+				if (map.obmp) {
+					$unobserve(map.obmp);
+				}
 				map.src = undefined;
 			},
 			map: Map,

jquery.observable.min.js

@@ -1,4 +1,4 @@
-/*! jquery.views.js v1.0.1: http://jsviews.com/ */
+/*! jquery.views.js v1.0.2: http://jsviews.com/ */
 /*
  * Interactive data-driven views using JsRender templates.
  * Subcomponent of JsViews
@@ -7,7 +7,7 @@
  * Also requires jquery.observable.js
  *   See JsObservable at http://jsviews.com/#download and http://github.com/BorisMoore/jsviews
  *
- * Copyright 2018, Boris Moore
+ * Copyright 2019, Boris Moore
  * Released under the MIT License.
  */
 
@@ -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 = "v1.0.1",
+var versionNumber = "v1.0.2",
 	requiresStr = "JsViews requires ";
 
 if (!$ || !$.fn) {
@@ -167,7 +167,7 @@ function updateValues(sourceValues, tagElse, bindId, ev) {
 // Called when linkedElem of a tag control changes: as updateValue(val, index, tagElse, bindId, ev) - this: undefined
 // Called directly as tag.updateValues(val1, val2, val3, ...) - this: tag
 	var linkCtx, cvtBack, cnvtName, target, view, binding, sourceValue, origVals, sourceElem, sourceEl,
-		oldLinkCtx, tos, to, tcpTag, exprOb, contextCb, l, m, tag;
+		tos, to, tcpTag, exprOb, contextCb, l, m, tag;
 
 	if (bindId && bindId._tgId) {
 		tag = bindId;
@@ -223,9 +223,6 @@ function updateValues(sourceValues, tagElse, bindId, ev) {
 			// the first arg, but all of them by returning an array.
 		}
 
-		// Set linkCtx on view, dynamically, just during this handler call
-		oldLinkCtx = view._lc;
-		view._lc = linkCtx;
 		l = tos.length;
 		while (l--) {
 			if (to = tos[l]) {
@@ -273,7 +270,6 @@ function updateValues(sourceValues, tagElse, bindId, ev) {
 				}
 			}
 		}
-		view._lc = oldLinkCtx;
 	}
 	if (tag) {
 		tag._.chg = undefined; // Clear marker
@@ -319,12 +315,12 @@ function onDataLinkedTagChange(ev, eventArgs) {
 		oldLinkCtx = view._lc,
 		onEvent = eventArgs && changeHandler(view, onBeforeChangeStr, tag);
 
-	// Set linkCtx on view, dynamically, just during this handler call
-	view._lc = linkCtx;
 	if (parentElem && (!onEvent || onEvent.call(tag || linkCtx, ev, eventArgs) !== false)
 			// If data changed, the ev.data is set to be the path. Use that to filter the handler action...
 			&& (!eventArgs || ev.data.prop === "*" || ev.data.prop === eventArgs.path)) {
 
+		// Set linkCtx on view, dynamically, just during this handler call
+		view._lc = linkCtx;
 		if (eventArgs) {
 			linkCtx.eventArgs = eventArgs;
 		}
@@ -371,12 +367,13 @@ function onDataLinkedTagChange(ev, eventArgs) {
 						// from the sourceValue (which may optionally have been modifed in onUpdate()...) and then bind, and we are done
 						observeAndBind(linkCtx, source, target);
 					}
+					// Remove dynamically added linkCtx from view
 					view._lc = oldLinkCtx;
 					if (eventArgs && (onEvent = changeHandler(view, onAfterChangeStr, tag))) {
 						onEvent.call(tag || linkCtx, ev, eventArgs);
 					}
 					if (tag.tagCtx.props.dataMap) {
-						tag.tagCtx.props.dataMap.map(tag.tagCtx.args[0], tag.tagCtx, tag.tagCtx.map, !tag._.bnd);
+						tag.tagCtx.props.dataMap.map(tag.tagCtx.args[0], tag.tagCtx, tag.tagCtx.map, isRenderCall || !tag._.bnd);
 					}
 					return;
 				}
@@ -456,7 +453,6 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 		$target = $(target),
 		view = linkCtx.view,
 		targetVal = linkCtx._val,
-		oldLinkCtx = view._lc,
 		change = tag;
 
 	if (tag) {
@@ -545,8 +541,6 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 
 		if (setter = fnSetters[attr]) {
 			if (attr === HTML) {
-				// Set linkCtx on view, dynamically, just during this handler call
-				view._lc = linkCtx;
 				if (tag && tag.inline) {
 					nodesToRemove = tag.nodes(true);
 					if (tag._elCnt) {
@@ -595,8 +589,6 @@ function updateContent(sourceValue, linkCtx, attr, tag) {
 						late = view.link(source, target, prevNode, nextNode, sourceValue, tag && {tag: tag._tgId});
 					}
 				}
-				// Remove dynamically added linkCtx and ctx from view
-				view._lc = oldLinkCtx;
 			} else {
 				if (change = change || targetVal !== sourceValue) {
 					if (attr === "text" && target.children && !target.children[0]) {
@@ -865,15 +857,15 @@ function observeAndBind(linkCtx, source, target) {
 			$observable._apply(1, [source], exprFnDeps, linkCtx._depends, handler, linkCtx._ctxCb, true);
 		}
 
-		if (tag && tag.boundProps) {
+		if (tag) {
 			// Add dependency paths for declared boundProps (so no need to write ^myprop=... to get binding) and for linkedProp too if there is one
 			l = tag.boundProps.length;
 			while (l--) {
 				prop = tag.boundProps[l];
 				k = tag._.bnd.paths.length;
-				while (k--) {
+				while (k--) { // Iterate across tagCtxs
 					propDeps = tag._.bnd.paths[k]["_" + prop];
-					if (propDeps && propDeps.skp) { // Not already a bound prop ^prop=expression;
+					if (propDeps && propDeps.length && propDeps.skp) { // Not already a bound prop ^prop=expression;
 						exprFnDeps = exprFnDeps.concat(propDeps); // Add dependencies for this prop expression
 					}
 				}
@@ -1901,7 +1893,8 @@ function callAfterLink(tag, ev, eventArgs) {
 		}
 	}
 
-	var linkedElems, linkedElements, linkedElem, l, m, $linkCtxElem, linkCtxElem, linkedEl, linkedTag, tagCtxElse, props, val, oldVal, indexTo,
+	var linkedElems, linkedElements, linkedElem, l, m, $linkCtxElem, linkCtxElem, linkedEl, linkedTag,
+		tagCtxElse, props, val, oldVal, indexTo, i, mapDeps, propDeps,
 		tagCtx = tag.tagCtx,
 		tagCtxs = tag.tagCtxs,
 		tagCtxslength = tagCtxs && tagCtxs.length,
@@ -1970,6 +1963,22 @@ function callAfterLink(tag, ev, eventArgs) {
 		tagCtxElse = tagCtxs[m];
 		props = tagCtxElse.props;
 
+		if (tag._.unlinked && tagCtxElse.map && tag.mapProps) {
+			// Compile the dependency paths for observable changes in mapProps (e.g. start, end, filter)
+			i = tag.mapProps.length;
+			mapDeps = props.mapDepends || tag.mapDepends || []; // dependency paths
+			mapDeps = $isArray(mapDeps) ? mapDeps : [mapDeps];
+			while (i--) { // Iterate through mapProps
+				var prop = tag.mapProps[i];
+				propDeps = tag._.bnd.paths[m]["_" + prop]; // paths for mapProps on this tagCtx
+				if (propDeps && propDeps.length && propDeps.skp) { // Not already a bound prop ^prop=expression;
+					mapDeps = mapDeps.concat(propDeps); // Add dependencies for this prop expression
+				}
+			}
+			if (mapDeps.length) {
+				tagCtxElse.map.observe(mapDeps, linkCtx); // Listen to observable changes of mapProps, and call map.update when change happens
+			}
+		}
 		if (linkedElem = tagCtxElse.mainElem || !tag.mainElement && tagCtxElse.linkedElems && tagCtxElse.linkedElems[0]) {
 			// linkedElem is the mainElem (defaulting to linkedElem)
 			if (linkedElem[0] && props.id && !linkedElem[0].id) {
@@ -3264,12 +3273,12 @@ $extend($tags["for"], {
 			}
 		}
 	}),
-	boundProps: ["filter", "sort", "reverse", "start", "end"],
+	mapProps: ["filter", "sort", "reverse", "start", "end", "step"],
 	bindTo: ["paged", "sorted"],
 	bindFrom: [0],
 
 	onArrayChange: function(ev, eventArgs, tagCtx, linkCtx) {
-		var arrayView,
+		var arrayView, propsArr,
 			targetLength = ev.target.length,
 			tag = this;
 		if (!tag.rendering) {
@@ -3278,7 +3287,11 @@ $extend($tags["for"], {
 					eventArgs.change === "insert" && targetLength === eventArgs.items.length // inserting, and new length is same as inserted length, so going from 0 to n
 					|| eventArgs.change === "remove" && !targetLength) // removing, and new length 0, so going from n to 0
 				) {
+				propsArr = tagCtx.map && tagCtx.map.propsArr; // Used by {{props}}, which derives from {{for}}
 				tag.refresh();
+				if (propsArr) {
+					tagCtx.map.propsArr = propsArr; // Keep previous propsArr with new map
+				}
 			} else for (arrayView in tag._.arrVws) {
 				arrayView = tag._.arrVws[arrayView];
 				if (arrayView.data === ev.target) {
@@ -3317,7 +3330,6 @@ $extend($tags["for"], {
 				: tagCtx.args.length
 					? tagCtx.args[0]    // or args[0]
 					: tagCtx.view.data; // or defaults to current data.
-
 			if (arrayBindings[i]) { // Is there was a previous binding on this tagCtx, (maybe with data different from new data)
 				$observe(arrayBindings[i], true); //unobserve previous array
 				delete arrayBindings[i];
@@ -3402,17 +3414,14 @@ $extend($tags["if"], {
 });
 
 function observeProps(map, ev, eventArgs) {
-	var props = map.options.tag.tagCtx.props;
+	var target, l, props = map.options.props;
+	updatePropsArr(map.propsArr, eventArgs.path, eventArgs.value, eventArgs.remove);
 	if (props.sort !== undefined || props.start !== undefined || props.end !== undefined || props.step !== undefined || props.filter || props.reverse) {
 		map.update(); // refresh sorting and filtering
 	} else if (eventArgs.change === "set") {
-		var target = map.tgt,
-			l = target.length;
-		while (l--) {
-			if (target[l].key === eventArgs.path) {
-				break;
-			}
-		}
+		target = map.tgt;
+		l = target.length;
+		while (l-- && target[l].key !== eventArgs.path) {}
 		if (l === -1) {
 			if (eventArgs.path && !eventArgs.remove) {
 				$observable(target).insert({key: eventArgs.path, prop: eventArgs.value});
@@ -3426,7 +3435,7 @@ function observeProps(map, ev, eventArgs) {
 }
 
 function observeMappedProps(map, ev, eventArgs) {
-	var items, l, key,
+	var items, l, key, remove,
 		source = map.src,
 		change = eventArgs.change;
 
@@ -3437,12 +3446,13 @@ function observeMappedProps(map, ev, eventArgs) {
 			$observable(source).removeProperty(eventArgs.oldValue); // When key is modified observably, remove old one and set new one
 			$observable(source).setProperty(eventArgs.value, ev.target.prop);
 		}
-	} else if (change === "insert" || change === "remove") {
+	} else if (change === "insert" || (remove = change === "remove")) {
 		items = eventArgs.items;
 		l = items.length;
 		while (l--) {
 			if (key = items[l].key) {
-				if (change === "remove") {
+				updatePropsArr(map.propsArr, key, items[l].prop, remove);
+				if (remove) {
 					$observable(source).removeProperty(key);
 					delete source[key];
 				} else {
@@ -3453,6 +3463,18 @@ function observeMappedProps(map, ev, eventArgs) {
 	}
 }
 
+function updatePropsArr(propsArr, key, prop, remove) {
+	var l = propsArr.length;
+	while (l-- && propsArr[l].key !== key) {}
+	if (l === -1) {
+		if (key && !remove) {
+			propsArr.push({key: key, prop: prop});
+		}
+	} else if (remove) {
+		propsArr.splice(l, 1);
+	}
+}
+
 function shallowArrayFilter(path /*, object, parentObs*/) { // Filter used by {{props}} for the mappedProps target array
 	return rShallowArrayPath.test(path); // No '.' in path
 }