fix is-node dispose bug

src/view/is-node.js

@@ -36,12 +36,13 @@ function IsNode(aNode, parent, scope, owner, reverseWalker) {
         : parent.parentComponent;
 
     this.id = guid++;
+    this.children = [];
 
     // #[begin] reverse
     if (reverseWalker) {
         var tagName = evalExpr(this.aNode.directives['is'].value, this.scope, this.owner);
         if (tagName) { // eslint-disable-line dot-notation
-            this.child = createReverseNode(
+            this.children[0] = createReverseNode(
                 this.aNode.isRinsed,
                 this,
                 this.scope,
@@ -69,13 +70,12 @@ IsNode.prototype.dispose = nodeOwnSimpleDispose;
  */
 IsNode.prototype.attach = function (parentEl, beforeEl) {
     var tagName = evalExpr(this.aNode.directives['is'].value, this.scope, this.owner);// eslint-disable-line dot-notation
-
     if (tagName) {
         var child = createNode(this.aNode.isRinsed, this, this.scope, this.owner);
 
         if (child) {
             this.tagName = tagName;
-            this.child = child;
+            this.children[0] = child;
             child.attach(parentEl, beforeEl);
         }
     }
@@ -92,7 +92,7 @@ IsNode.prototype.attach = function (parentEl, beforeEl) {
 IsNode.prototype._update = function (changes) {
     var me = this;
     var childANode = this.aNode.isRinsed;
-    var child = this.child;
+    var child = this.children[0];
     var tagName = evalExpr(this.aNode.directives['is'].value, this.scope); // eslint-disable-line dot-notation
 
     if (tagName === this.tagName) {
@@ -110,7 +110,7 @@ IsNode.prototype._update = function (changes) {
 };
 
 IsNode.prototype._getElAsRootNode = function () {
-    var child = this.child;
+    var child = this.children[0];
     return child && child.el || this.el;
 };
 

test/component.spec.js

@@ -1,5 +1,4 @@
 describe("Component", function () {
-
     var ColorPicker = san.defineComponent({
         template: '<div><b title="{{value}}">{{value}}</b>'
             + '<ul class="ui-colorpicker">'
@@ -4913,8 +4912,119 @@ describe("Component", function () {
         expect(child.tagName).toBe('BUTTON');
         expect(child.innerHTML).toContain('last');
 
+        myComponent.data.push('list', {type: 'link', title: 'five'});
         myComponent.nextTick(function () {
+            var buttons = myComponent.el.getElementsByTagName('A');
+            expect(buttons.length).toBe(3);
+            expect(buttons[2].innerHTML).toContain('five');
+            myComponent.dispose();
+            document.body.removeChild(wrap);
+            done();
+        });
+
+    });
+
+    it("s-is in if", function (done) {
+        var ChildA = san.defineComponent({
+            template: '<h2>erik</h2>'
+        });
+
+        var ChildB = san.defineComponent({
+            template: '<h3>varsha</h3>'
+        });
+
+        var MyComponent = san.defineComponent({
+            components: {
+                'x-child-a': ChildA,
+                'x-child-b': ChildB
+            },
+
+            template: '<div>'
+                + '<x-parent s-if="isOlder" s-is="\'x-child-a\'"/>'
+                + '<x-parent s-else s-is="\'x-child-b\'"/>'
+                + '</div>'
+        });
+
+        var myComponent = new MyComponent({
+            data: {
+                isOlder: true,
+            }
+        });
+        var wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        var children = myComponent.el.getElementsByTagName('H2');
+        expect(children.length).toBe(1);
+        expect(children[0].innerHTML).toBe('erik');
+
+        myComponent.data.set('isOlder', false);
+        myComponent.nextTick(function () {
+            var children = myComponent.el.getElementsByTagName('H3');
+            expect(children.length).toBe(1);
+            expect(children[0].innerHTML).toBe('varsha');
+
+            myComponent.dispose();
+            document.body.removeChild(wrap);
+            done();
+        });
+    });
+
+    it("s-if & s-for & s-is", function (done) {
+        var Button = san.defineComponent({
+            template: '<button><slot/></button>'
+        });
+
+        var Link = san.defineComponent({
+            template: '<a><slot/></a>'
+        });
+
+        var MyComponent = san.defineComponent({
+            components: {
+                'x-button': Button,
+                'x-link': Link
+            },
 
+            template: '<div>'
+                + '<div s-if="isShow" s-for="item in list" s-is="\'x-\'+item.type">{{item.title}}</div>'
+                + '</div>'
+        });
+
+        var myComponent = new MyComponent({
+            data: {
+                isShow: true,
+                list: [
+                    { type: 'link', title: 'one'},
+                    { type: 'button', title: 'two'},
+                    { type: 'button', title: 'three'},
+                    { type: 'link', title: 'four' }
+                ]
+            }
+        });
+        var wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        var child = myComponent.el.firstChild;
+        expect(child.tagName).toBe('A');
+        expect(child.innerHTML).toContain('one');
+
+        child = child.nextSibling.nextSibling;
+        expect(child.tagName).toBe('BUTTON');
+        expect(child.innerHTML).toContain('two');
+
+        child = child.nextSibling.nextSibling;
+        expect(child.tagName).toBe('BUTTON');
+        expect(child.innerHTML).toContain('three');
+
+        child = child.nextSibling.nextSibling;
+        expect(child.tagName).toBe('A');
+        expect(child.innerHTML).toContain('four');
+
+        myComponent.data.set('isShow', false);
+
+        myComponent.nextTick(function () {
+            expect(myComponent.el.children.length).toBe(0);
             myComponent.dispose();
             document.body.removeChild(wrap);
             done();
@@ -5313,7 +5423,7 @@ describe("Component", function () {
         });
     });
 
-    it("s-is value update in component as component root by s-is", function (done) {
+    it("dynamic s-is value as component root", function (done) {
         var ChildA = san.defineComponent({
             template: '<h2>erik</h2>'
         });
@@ -5329,7 +5439,6 @@ describe("Component", function () {
             }
         });
 
-
         var MyComponent = san.defineComponent({
             template: `<div>
                     <x-parent cmpt="{{cmpt}}"/>
@@ -5349,15 +5458,15 @@ describe("Component", function () {
         document.body.appendChild(wrap);
         myComponent.attach(wrap);
 
-        var childElm = myComponent.el.firstElementChild;
-        expect(childElm.tagName).toBe('H2');
-        expect(childElm.innerHTML).toBe('erik');
+        var children = myComponent.el.getElementsByTagName('H2');
+        expect(children.length).toBe(1);
+        expect(children[0].innerHTML).toBe('erik');
 
         myComponent.data.set('cmpt', 'x-child-b');
         myComponent.nextTick(function () {
-            var childElm = myComponent.el.firstElementChild;
-            expect(childElm.tagName).toBe('H3');
-            expect(childElm.innerHTML).toBe('varsha');
+            var children = myComponent.el.getElementsByTagName('H3');
+            expect(children.length).toBe(1);
+            expect(children[0].innerHTML).toBe('varsha');
 
             myComponent.dispose();
             document.body.removeChild(wrap);