[FIX] qweb: bind handlers to component

Before this commit, the handlers were bound to the current context,
which is often the component but not necessarily.  In some cases, a sub
scope can be created (with t-foreach, or slots, or t-call), and the
context is actually an object with the actual component instance it its
prototype chain, but not the component.

doc/reference/component.md

@@ -628,10 +628,20 @@ as it will be translated to:
 
 ```js
 button.addEventListener("click", () => {
-  component.state.counter++;
+  context.state.counter++;
 });
 ```
 
+Warning: inline expressions are evaluated in the context of the template. This
+means that they can access the component methods and properties. But if they set
+a key, the inline statement will actually not modify the component, but a key in
+a sub scope.
+
+```xml
+<button t-on-click="value = 1">Set value to 1 (does not work!!!)</button>
+<button t-on-click="state.value = 1">Set state.value to 1 (work as expected)</button>
+```
+
 In order to remove the DOM event details from the event handlers (like calls to
 `event.preventDefault`) and let them focus on data logic, _modifiers_ can be
 specified as additional suffixes of the `t-on` directive.

src/component/directive.ts

@@ -279,7 +279,13 @@ QWeb.addDirective({
       }
       let eventsCode = events
         .map(function([name, value]) {
-          const { event, handler } = makeHandlerCode(ctx, name, value, false, T_COMPONENT_MODS_CODE);
+          const { event, handler } = makeHandlerCode(
+            ctx,
+            name,
+            value,
+            false,
+            T_COMPONENT_MODS_CODE
+          );
           return `vn.elm.addEventListener('${event}', ${handler});`;
         })
         .join("");

src/qweb/expression_parser.ts

@@ -81,7 +81,7 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof
-const OPERATORS = ".,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=".split(",");
+const OPERATORS = ".,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 

src/qweb/extensions.ts

@@ -55,13 +55,15 @@ export function makeHandlerCode(
 
   // then generate code
   if (isMethodCall) {
+    ctx.rootContext.shouldDefineUtils = true;
+    const comp = `utils.getComponent(context)`;
     if (args) {
       let argId = ctx.generateID();
       ctx.addLine(`let args${argId} = [${ctx.formatExpression(args)}];`);
-      code = `context['${name}'](...args${argId}, e);`;
+      code = `${comp}['${name}'](...args${argId}, e);`;
       putInCache = false;
     } else {
-      code = `context['${name}'](e);`;
+      code = `${comp}['${name}'](e);`;
     }
   } else {
     // if we get here, then it is an expression

src/qweb/qweb.ts

@@ -120,6 +120,12 @@ const UTILS: Utils = {
         }
       })
       .join();
+  },
+  getComponent(obj) {
+    while (obj && !obj.hasOwnProperty("__owl__")) {
+      obj = obj.__proto__;
+    }
+    return obj;
   }
 };
 

tests/component/__snapshots__/component.test.ts.snap

@@ -499,7 +499,7 @@ exports[`other directives with t-component t-on with getter as handler 1`] = `
         if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
         w3 = new W3(parent, props3);
         parent.__owl__.cmap['__4__'] = w3.__owl__.id;
-        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['handler'](e);});}};});
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handler'](e);});}};});
         let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
@@ -538,7 +538,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -577,7 +577,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -616,7 +616,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -655,7 +655,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args4, e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -735,7 +735,7 @@ exports[`other directives with t-component t-on with no handler (only modifiers)
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -773,7 +773,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}context['onEv'](e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -811,7 +811,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();context['onEv'](e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();utils.getComponent(context)['onEv'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -849,7 +849,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}context['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}context['onEv2'](e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv2'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -887,7 +887,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
         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; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();context['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onEv2'](e);});vn.elm.addEventListener('ev-3', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();context['onEv3'](e);});}};});
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onEv2'](e);});vn.elm.addEventListener('ev-3', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();utils.getComponent(context)['onEv3'](e);});}};});
         let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;
@@ -997,7 +997,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
             if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
             w7 = new W7(parent, props7);
             parent.__owl__.cmap[k8] = w7.__owl__.id;
-            let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}context['onEv'](...args9, e);});}};});
+            let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args9, e);});}};});
             let pvnode = h('dummy', {key: k8, hook: {remove() {},destroy(vn) {w7.destroy();}}});
             c1.push(pvnode);
             w7.__owl__.pvnode = pvnode;
@@ -1009,6 +1009,39 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
 }"
 `;
 
+exports[`t-call handlers are properly bound through a t-call 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"sub\\"
+    let utils = this.constructor.utils;
+    var h = this.h;
+    let c1 = extra.parentNode;
+    let c2 = [], p2 = {key:2,on:{}};
+    var 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\`});
+}"
+`;
+
+exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"sub\\"
+    let utils = this.constructor.utils;
+    let scope = Object.create(context);
+    var h = this.h;
+    let c1 = extra.parentNode;
+    let c2 = [], p2 = {key:2,on:{}};
+    var 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\`});
+}"
+`;
+
 exports[`t-model directive .lazy modifier 1`] = `
 "function anonymous(context, extra
 ) {

tests/component/__snapshots__/slots.test.ts.snap

@@ -185,13 +185,14 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let utils = this.constructor.utils;
     context.__owl__.refs = context.__owl__.refs || {};
     var h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
     var vn8 = h('button', p8, c8);
     c1.push(vn8);
-    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](e);};
+    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
     p8.on['click'] = extra.handlers['click__9__'];
     const ref10 = \`myButton\`;
     p8.hook = {
@@ -210,12 +211,13 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
     var vn8 = h('button', p8, c8);
     c1.push(vn8);
-    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](e);};
+    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
     p8.on['click'] = extra.handlers['click__9__'];
     c8.push({text: \`do something\`});
 }"

tests/component/component.test.ts

@@ -2034,7 +2034,7 @@ describe("other directives with t-component", () => {
     class Parent extends Component<any, any> {
       static template = xml`<div><Child t-on-click="state.n = state.n + 1"/></div>`;
       static components = { Child };
-      state = {n: 3};
+      state = { n: 3 };
     }
     const parent = new Parent();
     await parent.mount(fixture);
@@ -2043,7 +2043,6 @@ describe("other directives with t-component", () => {
     expect(parent.state.n).toBe(4);
   });
 
-
   test("t-on with handler bound to argument", async () => {
     expect.assertions(3);
     env.qweb.addTemplates(`
@@ -5559,3 +5558,40 @@ describe("t-raw in components", () => {
     );
   });
 });
+
+describe("t-call", () => {
+  test("handlers are properly bound through a t-call", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplate("sub", `<p t-on-click="update">lucas</p>`);
+    class Parent extends Component<any, any> {
+      static template = xml`<div><t t-call="sub"/></div>`;
+      update() {
+        expect(this).toBe(parent);
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><p>lucas</p></div>");
+    fixture.querySelector("p")!.click();
+    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+  });
+
+  test("handlers with arguments are properly bound through a t-call", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplate("sub", `<p t-on-click="update(a)">lucas</p>`);
+    class Parent extends Component<any, any> {
+      static template = xml`<div><t t-call="sub"/></div>`;
+      update(a) {
+        expect(this).toBe(parent);
+        expect(a).toBe(3);
+      }
+      a = 3;
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+
+    fixture.querySelector("p")!.click();
+  });
+});

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -2080,10 +2080,11 @@ exports[`t-on can bind event handler 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['add'](e);};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](e);};
     p1.on['click'] = extra.handlers['click__2__'];
     c1.push({text: \`Click\`});
     return vn1;
@@ -2094,12 +2095,13 @@ exports[`t-on can bind handlers with arguments 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
     let args2 = [5];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['add'](...args2, e);};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2109,12 +2111,13 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
     let args2 = [{}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](...args2, e);};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2124,12 +2127,13 @@ exports[`t-on can bind handlers with empty object 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
     let args2 = [{}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['doSomething'](...args2, e);};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2139,6 +2143,7 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
@@ -2167,7 +2172,7 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
         var vn8 = h('a', p8, c8);
         c7.push(vn8);
         let args9 = [scope['action']];
-        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['activate'](...args9, e);};
+        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['activate'](...args9, e);};
         c8.push({text: \`link\`});
     }
     scope = _origScope5;
@@ -2179,12 +2184,13 @@ exports[`t-on can bind handlers with object arguments 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
     let args2 = [{val:5}];
-    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}context['add'](...args2, e);};
+    p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](...args2, e);};
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -2194,12 +2200,13 @@ exports[`t-on can bind two event handlers 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['handleClick'](e);};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handleClick'](e);};
     p1.on['click'] = extra.handlers['click__2__'];
-    extra.handlers['dblclick__3__'] = extra.handlers['dblclick__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['handleDblClick'](e);};
+    extra.handlers['dblclick__3__'] = extra.handlers['dblclick__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handleDblClick'](e);};
     p1.on['dblclick'] = extra.handlers['dblclick__3__'];
     c1.push({text: \`Click\`});
     return vn1;
@@ -2210,10 +2217,11 @@ exports[`t-on handler is bound to proper owner 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}context['add'](e);};
+    extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](e);};
     p1.on['click'] = extra.handlers['click__2__'];
     c1.push({text: \`Click\`});
     return vn1;
@@ -2224,6 +2232,7 @@ exports[`t-on t-on combined with t-esc 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
@@ -2231,7 +2240,7 @@ exports[`t-on t-on combined with t-esc 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     var _4 = scope['text'];
     if (_4 || _4 === 0) {
@@ -2253,7 +2262,7 @@ exports[`t-on t-on combined with t-raw 1`] = `
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     var _4 = scope['html'];
     if (_4 || _4 === 0) {
@@ -2340,13 +2349,14 @@ exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== this.elm) {return}context['onClick'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== this.elm) {return}utils.getComponent(context)['onClick'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     let c4 = [], p4 = {key:4};
     var vn4 = h('span', p4, c4);
@@ -2360,25 +2370,26 @@ exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onClickPrevented'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onClickPrevented'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     c2.push({text: \`Button 1\`});
     let c4 = [], p4 = {key:4,on:{}};
     var vn4 = h('button', p4, c4);
     c1.push(vn4);
-    extra.handlers['click__5__'] = extra.handlers['click__5__'] || function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();context['onClickStopped'](e);};
+    extra.handlers['click__5__'] = extra.handlers['click__5__'] || function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();utils.getComponent(context)['onClickStopped'](e);};
     p4.on['click'] = extra.handlers['click__5__'];
     c4.push({text: \`Button 2\`});
     let c6 = [], p6 = {key:6,on:{}};
     var vn6 = h('button', p6, c6);
     c1.push(vn6);
-    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'](e);};
+    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();e.stopPropagation();utils.getComponent(context)['onClickPreventedAndStopped'](e);};
     p6.on['click'] = extra.handlers['click__7__'];
     c6.push({text: \`Button 3\`});
     return vn1;
@@ -2389,6 +2400,7 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
@@ -2415,7 +2427,7 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
         var vn8 = h('a', p8, c8);
         c1.push(vn8);
         let args9 = [scope['project'].id];
-        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();context['onEdit'](...args9, e);};
+        p8.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onEdit'](...args9, e);};
         c8.push({text: \` Edit \`});
         var _10 = scope['project'].name;
         if (_10 || _10 === 0) {
@@ -2431,13 +2443,14 @@ exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}e.preventDefault();context['onClick'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}e.preventDefault();utils.getComponent(context)['onClick'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     let c4 = [], p4 = {key:4};
     var vn4 = h('span', p4, c4);
@@ -2451,13 +2464,14 @@ exports[`t-on t-on with self modifier 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"test\\"
+    let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
     var vn2 = h('button', p2, c2);
     c1.push(vn2);
-    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}context['onClick'](e);};
+    extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
     let c4 = [], p4 = {key:4};
     var vn4 = h('span', p4, c4);
@@ -2466,7 +2480,7 @@ exports[`t-on t-on with self modifier 1`] = `
     let c5 = [], p5 = {key:5,on:{}};
     var vn5 = h('button', p5, c5);
     c1.push(vn5);
-    extra.handlers['click__6__'] = extra.handlers['click__6__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}context['onClickSelf'](e);};
+    extra.handlers['click__6__'] = extra.handlers['click__6__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}utils.getComponent(context)['onClickSelf'](e);};
     p5.on['click'] = extra.handlers['click__6__'];
     let c7 = [], p7 = {key:7};
     var vn7 = h('span', p7, c7);
@@ -2476,6 +2490,32 @@ exports[`t-on t-on with self modifier 1`] = `
 }"
 `;
 
+exports[`t-on t-on with t-call 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"main\\"
+    let scope = Object.create(context);
+    var h = this.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    this.subTemplates['sub'].call(this, Object.assign(Object.create(context), scope), Object.assign({}, extra, {parentNode: c1}));
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on, with arguments and t-call 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"main\\"
+    let scope = Object.create(context);
+    var h = this.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    this.subTemplates['sub'].call(this, Object.assign(Object.create(context), scope), Object.assign({}, extra, {parentNode: c1}));
+    return vn1;
+}"
+`;
+
 exports[`t-raw literal 1`] = `
 "function anonymous(context, extra
 ) {

tests/qweb/qweb.test.ts

@@ -1120,7 +1120,7 @@ describe("misc", () => {
   });
 });
 
-describe.only("t-on", () => {
+describe("t-on", () => {
   test("can bind event handler", () => {
     qweb.addTemplate("test", `<button t-on-click="add">Click</button>`);
     let a = 1;
@@ -1324,6 +1324,38 @@ describe.only("t-on", () => {
     expect(owner.state.n).toBe(4);
   });
 
+  test("t-on with t-call", async () => {
+    expect.assertions(2);
+    qweb.addTemplate("sub", `<p t-on-click="update">lucas</p>`);
+    qweb.addTemplate("main", `<div><t t-call="sub"/></div>`);
+
+    let owner = {
+      update() {
+        expect(this).toBe(owner);
+      }
+    };
+
+    const node = renderToDOM(qweb, "main", owner, { handlers: [] });
+    (<HTMLElement>node).querySelector("p")!.click();
+  });
+
+  test("t-on, with arguments and t-call", async () => {
+    expect.assertions(3);
+    qweb.addTemplate("sub", `<p t-on-click="update(value)">lucas</p>`);
+    qweb.addTemplate("main", `<div><t t-call="sub"/></div>`);
+
+    let owner = {
+      update(val) {
+        expect(this).toBe(owner);
+        expect(val).toBe(444);
+      },
+      value: 444
+    };
+
+    const node = renderToDOM(qweb, "main", owner, { handlers: [] });
+    (<HTMLElement>node).querySelector("p")!.click();
+  });
+
   test("t-on with prevent and/or stop modifiers", async () => {
     expect.assertions(7);
     qweb.addTemplate(

tests/router/__snapshots__/link.test.ts.snap

@@ -11,7 +11,7 @@ exports[`Link component can render simple cases 1`] = `
     var _5 = scope['href'];
     let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
     var vn6 = h('a', p6, c6);
-    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}context['navigate'](e);};
+    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);};
     p6.on['click'] = extra.handlers['click__7__'];
     const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot8) {