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);
+ });
});