$onContentRefresh for custom attributes

Close #314
ariatemplates · Sep 30, 2014 · 771662d · 771662d
1 parent b6e3776
commit 771662d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/hsp/rt.js b/hsp/rt.js
@@ -214,6 +214,7 @@ var customAttributesRegistry = [];
  *  - $setValue(name, stringValue): called each time the attribute value changed, including when the initial value is set.
  *  - $setValueFromExp(name, expresionValues): called each time the attribute is refreshed, including when the initial value is set.
  *  - $onAttributesRefresh(): called at the end of the attributes'refresh process, i.e. once all attributes have their new value.
+ *  - $onContentRefresh(): called when the content of the node holding the custom attribute has been refreshed.
  *  - $handleEvent(event): called when an event for which the custom attribute registered for is fired.
  *  - $dispose(): used to dispose the handler instance. 
  *  It is instanciated on each element node with one of the custom attributes.

diff --git a/hsp/rt/eltnode.js b/hsp/rt/eltnode.js
@@ -111,6 +111,24 @@ var EltNode = klass({
         TNode.$dispose.call(this);
     },
 
+    /**
+     * Create a node instance referencing the current node as base class Create as well the DOM element that will be
+     * appended to the parent node DOM element
+     * @return {TNode} the new node instance
+     */
+    createNodeInstance : function (parent) {
+        var ni = TNode.createNodeInstance.call(this, parent);
+        if (ni._allCustAttrHandlers) {
+            for (var i = 0; i < ni._allCustAttrHandlers.length; i++) {
+                var handler = ni._allCustAttrHandlers[i].instance;
+                if (handler.$onContentRefresh) {
+                    handler.$onContentRefresh();
+                }
+            }
+        }
+        return ni;
+    },
+
     /**
      * Create the DOM node element
      */
@@ -240,11 +258,20 @@ var EltNode = klass({
      * Refresh the node
      */
     refresh : function () {
+        var cdirtybackup = this.cdirty;
         if (this.adirty) {
             // attributes are dirty
             this.refreshAttributes();
         }
         TNode.refresh.call(this);
+        if (cdirtybackup && this._allCustAttrHandlers) {
+            for (var i = 0; i < this._allCustAttrHandlers.length; i++) {
+                var handler = this._allCustAttrHandlers[i].instance;
+                if (handler.$onContentRefresh) {
+                    handler.$onContentRefresh();
+                }
+            }
+        }
     },
 
     /**

diff --git a/test/rt/customAttributes.spec.hsp b/test/rt/customAttributes.spec.hsp
@@ -1,6 +1,7 @@
 <script>
 var hsp = require("hsp/rt");
 var klass = klass=require("hsp/klass");
+var $set = require('hsp/$set');
 </script>
 
 <template test1()>
@@ -52,6 +53,12 @@ var klass = klass=require("hsp/klass");
     </div>
 </template>
 
+<template test8(d)>
+    <div style="height: 20px" childca>
+        <span>{d.value}</span>
+    </div>
+</template>
+
 <script>
 describe("Custom attributes", function () {
 
@@ -117,10 +124,18 @@ describe("Custom attributes", function () {
         }
     });
 
+    var handleContentCount = 0;
+    var customChildHandler = klass({
+        $onContentRefresh: function() {
+            handleContentCount++;
+        }
+    });
+
     hsp.registerCustomAttributes("verybigdiv", customHandler, 2);
     hsp.registerCustomAttributes("customheightdiv", customHandler);
     hsp.registerCustomAttributes(["customone", "customtwo"], groupHandler);
     hsp.registerCustomAttributes("customButton", customButtonHandler, 0, ["button"]);
+    hsp.registerCustomAttributes("childca", customChildHandler);
 
     it("tests a simple custom attribute", function () {
         var n = test1();
@@ -207,5 +222,24 @@ describe("Custom attributes", function () {
         n.$dispose();
         expect(status).to.equal("Clean");
     });
+
+    it("tests content changes", function() {
+        handleContentCount = 0;
+        var data = {
+            value: "a"
+        }
+        var n = test8(data);
+        var content = n.node.querySelector("span");
+        expect(handleContentCount).to.equal(1);
+        expect(content.innerHTML).to.equal("a");
+
+        $set(data, "value", "b");
+        hsp.refresh();
+
+        expect(handleContentCount).to.equal(2);
+        expect(content.innerHTML).to.equal("b");
+
+        n.$dispose();
+    });
 });
 </script>