[FIX] app: t_call recursive template is bound to the correct this

This commit is contained in:
Lucas Perais (lpe)
2022-01-14 18:07:08 +01:00
committed by Mathieu Duckerts-Antoine
parent 483335df6c
commit 79a51f2317
3 changed files with 92 additions and 1 deletions
@@ -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(\`<div><block-child-0/></div>\`);
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(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
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
) {
+38
View File
@@ -206,4 +206,42 @@ describe("t-call", () => {
expect(fixture.innerHTML).toBe(`<div id="0"></div><div id="1"></div>`);
});
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`
<div><t t-call="recursive"><t t-set="level" t-value="0" /></t></div>
`;
}
const app = new App(Parent);
app.addTemplate(
"recursive",
`
<t t-if="level &lt; 2" >
<div t-on-click.stop="onClicked.bind(this)" t-esc="level" />
<t t-call="recursive">
<t t-set="level" t-value="level + 1" />
</t>
</t>
`
);
await app.mount(fixture);
for (const div of fixture.querySelectorAll("div")) {
div.click();
}
expect(clickCount).toBe(2);
});
});