NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] qweb: t-call properly transfer key to sub components

Browse Source 
Since t-call is now a function call, we need to properly handle the
internal key used to find previous components.  If a t-call is inside a
t-foreach, then we need to transfer the key to the sub template.
Otherwise, each component in the subtemplate will be associated to the
same key, which means that it will lead to big issues: components are
destroyed and reused...

closes #581
This commit is contained in:
Géry Debongnie
2019-12-16 14:20:36 +01:00
committed by aab-odoo
parent d9bf4284c6
commit 9216c5c24b
5 changed files with 230 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/__snapshots__/component.test.ts.snap
+53 -46
View File
@@ -1017,12 +1017,14 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
let utils = this.constructor.utils;
let h = this.h;
let c1 = extra.parentNode;
let c2 = [], p2 = {key:2,on:{}};
let vn2 = h('p', p2, c2);
c1.push(vn2);
extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
p2.on['click'] = extra.handlers['click__3__'];
c2.push({text: \`lucas\`});
let key2 = extra.key || '';
let c3 = [], p3 = {key:key2,on:{}};
let vn3 = h('p', p3, c3);
c1.push(vn3);
let k4 = \`click__4__\` + key2;
extra.handlers[k4] = extra.handlers[k4] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
p3.on['click'] = extra.handlers[k4];
c3.push({text: \`lucas\`});
}"
`;
@@ -1034,12 +1036,13 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
let scope = Object.create(context);
let h = this.h;
let c1 = extra.parentNode;
let c2 = [], p2 = {key:2,on:{}};
let vn2 = h('p', p2, c2);
c1.push(vn2);
let args3 = [scope['a']];
p2.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args3, e);};
c2.push({text: \`lucas\`});
let key2 = extra.key || '';
let c3 = [], p3 = {key:key2,on:{}};
let vn3 = h('p', p3, c3);
c1.push(vn3);
let args4 = [scope['a']];
p3.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args4, e);};
c3.push({text: \`lucas\`});
}"
`;
@@ -1053,29 +1056,31 @@ exports[`t-call parent is set within t-call 1`] = `
let scope = Object.create(context);
let h = this.h;
let c1 = extra.parentNode;
let key2 = extra.key || '';
// Component 'Child'
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
let props2 = {};
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
w2.destroy();
w2 = false;
let k4 = \`__4__\` + key2;
let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
let props3 = {};
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
w3.destroy();
w3 = false;
}
if (w2) {
w2.__updateProps(props2, extra.fiber, undefined);
let pvnode = w2.__owl__.pvnode;
if (w3) {
w3.__updateProps(props3, extra.fiber, undefined);
let pvnode = w3.__owl__.pvnode;
c1.push(pvnode);
} else {
let componentKey2 = \`Child\`;
let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
w2 = new W2(parent, props2);
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
let componentKey3 = \`Child\`;
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child'];
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
w3 = new W3(parent, props3);
parent.__owl__.cmap[k4] = w3.__owl__.id;
let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
c1.push(pvnode);
w2.__owl__.pvnode = pvnode;
w3.__owl__.pvnode = pvnode;
}
w2.__owl__.parentLastFiberId = extra.fiber.id;
w3.__owl__.parentLastFiberId = extra.fiber.id;
}"
`;
@@ -1089,29 +1094,31 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
let scope = Object.create(context);
let h = this.h;
let c1 = extra.parentNode;
let key2 = extra.key || '';
// Component 'Child'
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
let props2 = {};
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
w2.destroy();
w2 = false;
let k4 = \`__4__\` + key2;
let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
let props3 = {};
if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
w3.destroy();
w3 = false;
}
if (w2) {
w2.__updateProps(props2, extra.fiber, undefined);
let pvnode = w2.__owl__.pvnode;
if (w3) {
w3.__updateProps(props3, extra.fiber, undefined);
let pvnode = w3.__owl__.pvnode;
c1.push(pvnode);
} else {
let componentKey2 = \`Child\`;
let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
w2 = new W2(parent, props2);
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
let componentKey3 = \`Child\`;
let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child'];
if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
w3 = new W3(parent, props3);
parent.__owl__.cmap[k4] = w3.__owl__.id;
let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
c1.push(pvnode);
w2.__owl__.pvnode = pvnode;
w3.__owl__.pvnode = pvnode;
}
w2.__owl__.parentLastFiberId = extra.fiber.id;
w3.__owl__.parentLastFiberId = extra.fiber.id;
}"
`;
tests/component/component.test.ts
+20
View File
@@ -5599,6 +5599,26 @@ describe("t-call", () => {
expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
});
test("t-call in t-foreach and children component", async () => {
env.qweb.addTemplate("sub", `<Child val="val"/>`);
class Child extends Component<any, any> {
static template = xml`<span><t t-esc="props.val"/></span>`;
}
class Parent extends Component<any, any> {
static components = { Child };
static template = xml`
<div>
<t t-foreach="['a', 'b', 'c']" t-as="val" t-key="val">
<t t-call="sub"/>
</t>
</div>`;
}
const parent = new Parent();
await parent.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>a</span><span>b</span><span>c</span></div>");
});
test("parent is set within t-call with no parentNode", async () => {
env.qweb.addTemplate("sub", `<Child/>`);
let child;