diff --git a/src/app/template_set.ts b/src/app/template_set.ts index a1d02409..a4ec1db4 100644 --- a/src/app/template_set.ts +++ b/src/app/template_set.ts @@ -96,7 +96,10 @@ export class TemplateSet { const templateFn = this._compileTemplate(name, rawTemplate); // first add a function to lazily get the template, in case there is a // recursive call to the template name - this.templates[name] = (context, parent) => this.templates[name](context, parent); + const templates = this.templates; + this.templates[name] = function (context, parent) { + return templates[name].call(this, context, parent); + }; const template = templateFn(bdom, this.utils); this.templates[name] = template; } diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap index 5089c96b..ec9ca4c4 100644 --- a/tests/components/__snapshots__/t_call.test.ts.snap +++ b/tests/components/__snapshots__/t_call.test.ts.snap @@ -251,6 +251,56 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = ` }" `; +exports[`t-call recursive t-call binding this -- static t-call 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { isBoundary, withDefault, setContextValue, getTemplate } = helpers; + const callTemplate_1 = getTemplate(\`recursive\`); + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + ctx = Object.create(ctx); + ctx[isBoundary] = 1 + ctx = Object.create(ctx); + ctx[isBoundary] = 1; + setContextValue(ctx, \\"level\\", 0); + let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`); + return block1([], [b2]); + } +}" +`; + +exports[`t-call recursive t-call binding this -- static t-call 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { isBoundary, withDefault, setContextValue, getTemplate } = helpers; + const callTemplate_1 = getTemplate(\`recursive\`); + + let block3 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + ctx = Object.create(ctx); + ctx[isBoundary] = 1 + let b2; + if (ctx['level']<2) { + let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx]; + let txt1 = ctx['level']; + let b3 = block3([hdlr1, txt1]); + ctx = Object.create(ctx); + ctx[isBoundary] = 1; + setContextValue(ctx, \\"level\\", ctx['level']+1); + let b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`); + ctx = ctx.__proto__; + b2 = multi([b3, b4]); + } + return multi([b2]); + } +}" +`; + exports[`t-call sub components in two t-calls 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/t_call.test.ts b/tests/components/t_call.test.ts index 59778faa..5f74ea66 100644 --- a/tests/components/t_call.test.ts +++ b/tests/components/t_call.test.ts @@ -206,4 +206,42 @@ describe("t-call", () => { expect(fixture.innerHTML).toBe(`
`); }); + + test("recursive t-call binding this -- static t-call", async () => { + let clickCount = 0; + class Parent extends Component { + onClicked?: Function; + setup() { + const instance = this; + + this.onClicked = function () { + clickCount++; + expect(this).toBe(instance); + }; + } + + static template = xml` +
+ `; + } + + const app = new App(Parent); + app.addTemplate( + "recursive", + ` + +
+ + + + + ` + ); + + await app.mount(fixture); + for (const div of fixture.querySelectorAll("div")) { + div.click(); + } + expect(clickCount).toBe(2); + }); });