Fixed event firing on changes to array and object parameters

(c) Copyright IBM Corp. 2016

elements/urth-core-behaviors/dynamic-properties-behavior.html

@@ -6,6 +6,10 @@
 <script>
     'use strict';
     (function() {
+        var SplicesPathPattern = /\.splices$/;
+        var LengthPathPattern = /\.length$/;
+        var ObjectKeyPathPattern = /(^arg[^\.\n]+?)(\.[^\.\n]+)+/
+
         window.Urth = window.Urth || {};
 
         /**
@@ -28,6 +32,12 @@
             addDynamicProperties: function(dynProps){
                 this._dynamicProperties = dynProps;
                 this._addPropertyEffects(dynProps);
+
+                //add a complex observer to handle Arrays and Objects
+                Object.keys(dynProps).forEach(function(dynProp){
+                    this._addComplexObserverEffect("__complexObserver(" + dynProp + ".*" + ")")
+                }.bind(this))
+
                 this.__createBindings(dynProps);
             },
 
@@ -104,6 +114,19 @@
                 Object.defineProperty(this, property, defun)
             },
 
+            /*
+             * Generic complex observer to handle changes within arrays and objects
+             */
+            __complexObserver: function(rec){
+                //test that path ends with "splices"
+                if( (Array.isArray(rec.base) && SplicesPathPattern.test(rec.path)) ||
+                    (!Array.isArray(rec.base) && ObjectKeyPathPattern.test(rec.path))){
+                    //the first part of the path is the name of the arg
+                    var propName = rec.path.substring(0, rec.path.indexOf('.'));
+                    this[this._dynamicProperties[propName].observer].call(this, this[propName]);
+                }
+            }
+
         };
     })();
 </script>

elements/urth-core-function/test/urth-core-function.html

@@ -1020,6 +1020,61 @@
 
             });
         });
+        describe('#dynamic property modification', function() {
+            it('should invoke _onParameterChange when adding to an array type', function() {
+                var fElmt = fixture('basic');
+
+                fElmt._setSignature({
+                    x: {}
+                });
+
+                fElmt.argX = [1,2,3];
+
+                var _onParameterChange = sinon.spy(fElmt, "_onParameterChange");
+
+                fElmt.push("argX", 4);
+
+                assert(_onParameterChange.calledOnce, "_onParameterChange was called " + _onParameterChange.callCount);
+                assert(_onParameterChange.calledWith("x", [1,2,3,4]), "_onParameterChange called with wrong arguments");
+
+            });
+
+            it('should invoke _onParameterChange when adding setting a key in an object type', function() {
+                var fElmt = fixture('basic');
+
+                fElmt._setSignature({
+                    x: {}
+                });
+
+                fElmt.argX = {a:1, b:2};
+
+                var _onParameterChange = sinon.spy(fElmt, "_onParameterChange");
+
+                fElmt.set("argX.c", 3);
+
+                assert(_onParameterChange.calledOnce, "_onParameterChange was called " + _onParameterChange.callCount);
+                assert(_onParameterChange.calledWith("x", {a:1, b:2, c:3}), "_onParameterChange called with wrong arguments");
+
+            });
+
+            it('should invoke _onParameterChange when adding setting a length key in an object type', function() {
+                var fElmt = fixture('basic');
+
+                fElmt._setSignature({
+                    x: {}
+                });
+
+                fElmt.argX = {a:1, b:2};
+
+                var _onParameterChange = sinon.spy(fElmt, "_onParameterChange");
+
+                fElmt.set("argX.length", 3);
+
+                assert(_onParameterChange.calledOnce, "_onParameterChange was called " + _onParameterChange.callCount);
+                assert(_onParameterChange.calledWith("x", {a:1, b:2, length:3}), "_onParameterChange called with wrong arguments");
+
+            });
+        });
     </script>
 </body>
 </html>

etc/notebooks/examples/urth-core-function.ipynb

@@ -26,7 +26,11 @@
     "<link rel='import' href='urth_components/paper-slider/paper-slider.html'\n",
     "        is='urth-core-import' package='PolymerElements/paper-slider'>\n",
     "<link rel='import' href='urth_components/paper-toggle-button/paper-toggle-button.html'\n",
-    "        is='urth-core-import' package='PolymerElements/paper-toggle-button'>"
+    "        is='urth-core-import' package='PolymerElements/paper-toggle-button'>\n",
+    "<link rel=\"import\" href=\"urth_components/paper-menu/paper-menu.html\" \n",
+    "        is='urth-core-import' package='PolymerElements/paper-menu'>\n",
+    "<link rel=\"import\" href=\"urth_components/paper-item/paper-item.html\" \n",
+    "        is='urth-core-import' package='PolymerElements/paper-item'>"
    ]
   },
   {
@@ -245,6 +249,46 @@
     "</template>"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Example 3c Function with List parameter\n",
+    "This function will be invoked when the elements of the lists are changed. Change the elements in the list by selecting from the list below."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "def aFunctionWithList(items:list):\n",
+    "    return items"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [],
+   "source": [
+    "%%html\n",
+    "<template is=\"dom-bind\">\n",
+    "    <urth-core-function ref=\"aFunctionWithList\" arg-items=\"[[selections]]\" result=\"{{theResult}}\" auto></urth-core-function>\n",
+    "    <paper-menu attr-for-selected=\"label\" multi selected-values=\"{{selections}}\">\n",
+    "        <paper-item label=\"1\">Item 1</paper-item>\n",
+    "        <paper-item label=\"2\">Item 2</paper-item>\n",
+    "        <paper-item label=\"3\">Item 3</paper-item>\n",
+    "    </paper-menu>\n",
+    "    The function got a list with <span>{{theResult}}</span><br/>\n",
+    "</template>"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},