diff --git a/src/view/is-node.js b/src/view/is-node.js index b50225ba..dc1a1577 100644 --- a/src/view/is-node.js +++ b/src/view/is-node.js @@ -39,7 +39,7 @@ function IsNode(aNode, parent, scope, owner, hydrateWalker) { this.tagName = this.aNode.tagName; // #[begin] hydrate if (hydrateWalker) { - this.cmpt = evalExpr(this.aNode.directives.is.value, this.scope) || this.tagName; + this.cmpt = evalExpr(this.aNode.directives.is.value, this.scope, this.owner) || this.tagName; this.children[0] = createHydrateNode( this.aNode.isRinsed, this, @@ -63,7 +63,7 @@ IsNode.prototype.dispose = nodeOwnSimpleDispose; * @param {HTMLElement=} beforeEl 要添加到哪个元素之前 */ IsNode.prototype.attach = function (parentEl, beforeEl) { - this.cmpt = evalExpr(this.aNode.directives.is.value, this.scope) || this.tagName; + this.cmpt = evalExpr(this.aNode.directives.is.value, this.scope, this.owner) || this.tagName; var child = createNode(this.aNode.isRinsed, this, this.scope, this.owner, this.cmpt); this.children[0] = child; @@ -77,7 +77,7 @@ IsNode.prototype.attach = function (parentEl, beforeEl) { */ IsNode.prototype._update = function (changes) { var child = this.children[0]; - var cmpt = evalExpr(this.aNode.directives.is.value, this.scope) || this.tagName; + var cmpt = evalExpr(this.aNode.directives.is.value, this.scope, this.owner) || this.tagName; if (cmpt === this.cmpt) { child._update(changes); diff --git a/test/component.spec.js b/test/component.spec.js index 8289f7ec..214bb645 100644 --- a/test/component.spec.js +++ b/test/component.spec.js @@ -966,6 +966,99 @@ describe("Component", function () { }); }); + it("s-is use component method", function () { + var Label = san.defineComponent({ + template: '{{text}}', + initData: function () { + return { + text: 'erik' + } + } + }); + + var MyComponent = san.defineComponent({ + components: { + 'x-label': Label + }, + initData: function () { + return { + type: 'label' + } + }, + getComponentName: function () { + return 'x-' + this.data.get('type'); + }, + template: '
' + }); + + var myComponent = new MyComponent(); + + var wrap = document.createElement('div'); + document.body.appendChild(wrap); + myComponent.attach(wrap); + + var span = wrap.getElementsByTagName('span')[0]; + expect(span.title).toBe('erik'); + + myComponent.dispose(); + document.body.removeChild(wrap); + }); + + it("s-is use component method update", function (done) { + var Label = san.defineComponent({ + template: '{{text}}', + initData: function () { + return { + text: 'erik' + } + } + }); + + var H2 = san.defineComponent({ + template: '

{{text}}.baidu

', + initData: function () { + return { + text: 'erik' + } + } + }); + + var MyComponent = san.defineComponent({ + components: { + 'x-label': Label, + 'x-h2': H2 + }, + initData: function () { + return { + type: 'label' + } + }, + getComponentName: function () { + return 'x-' + this.data.get('type'); + }, + template: '
' + }); + + var myComponent = new MyComponent(); + + var wrap = document.createElement('div'); + document.body.appendChild(wrap); + myComponent.attach(wrap); + + var span = wrap.getElementsByTagName('span')[0]; + expect(span.title).toBe('erik'); + + myComponent.data.set('type', 'h2'); + san.nextTick(function () { + var h2 = wrap.getElementsByTagName('h2')[0]; + expect(h2.innerHTML).toBe('erik.baidu'); + + myComponent.dispose(); + document.body.removeChild(wrap); + done(); + }); + }); + it("components in inherits structure", function () { var Span = san.defineComponent({}); Span.template = 'span'; @@ -2277,103 +2370,6 @@ describe("Component", function () { }); }); - it("bind data should not duplicate updates when set and push in same tick", function (done) { - var Child = san.defineComponent({ - template: '
' - + '{{item}}' - + '{{item}}' - + '{{item}}' - + '{{item}}' - + '

{{item}}

' - + '{{item}}' - + '
', - }); - - var MyComponent = san.defineComponent({ - components: { - 'x-child': Child - }, - template: '
', - initData: function () { - return { - list1: [], - list2: [], - obj: { - list3: [] - }, - obj1: { - list4: [] - }, - obj2: { - list5: [] - }, - obj3: { - list6: [] - } - }; - }, - attached: function () { - // Case 1: SET then PUSH (Same level) - this.data.set('list1', []); - this.data.push('list1', 1); - - // Case 2: PUSH then SET (Same level) - this.data.push('list2', 1); - this.data.set('list2', []); - - // Case 3: SET then PUSH (Nested property) - this.data.set('obj.list3', []); - this.data.push('obj.list3', 1); - - // Case 4: SET Parent then PUSH Child - this.data.set('obj1', {list4: []}); - this.data.push('obj1.list4', 1); - - // Case 5 - this.data.set('obj2', {list5: []}); - this.data.push('obj2.list5', 1); - - // Case 6 - this.data.set('obj3.list6', []); - this.data.push('obj3.list6', 1); - } - }); - - var myComponent = new MyComponent(); - var wrap = document.createElement('div'); - document.body.appendChild(wrap); - myComponent.attach(wrap); - - san.nextTick(function () { - var lis1 = wrap.getElementsByTagName('a'); - expect(lis1.length).toBe(1); - expect(lis1[0].innerHTML).toBe('1'); - - var lis2 = wrap.getElementsByTagName('b'); - expect(lis2.length).toBe(0); - - var lis3 = wrap.getElementsByTagName('i'); - expect(lis3.length).toBe(1); - expect(lis3[0].innerHTML).toBe('1'); - - var lis4 = wrap.getElementsByTagName('u'); - expect(lis4.length).toBe(1); - expect(lis4[0].innerHTML).toBe('1'); - - var lis5 = wrap.getElementsByTagName('p'); - expect(lis5.length).toBe(1); - expect(lis5[0].innerHTML).toBe('1'); - - var lis6 = wrap.getElementsByTagName('q'); - expect(lis6.length).toBe(1); - expect(lis6[0].innerHTML).toBe('1'); - - myComponent.dispose(); - document.body.removeChild(wrap); - done(); - }); - }); - it("computed", function (done) { var MyComponent = san.defineComponent({ template: '
{{name}}
',