[FIX] qweb/component: fix scoping issue with t-model and t-foreach

Without this fix, the handler set by t-model did not capture properly
the expression that needs to be updated.

closes #474

src/component/directive.ts

@@ -229,19 +229,7 @@ QWeb.addDirective({
     let defID = ctx.generateID();
     let componentID = ctx.generateID();
 
-    let locationExpr = `\`__${ctx.generateID()}__`;
-    for (let i = 0; i < ctx.loopNumber - 1; i++) {
-      locationExpr += `\${i${i + 1}}__`;
-    }
-    if (ctx.lastNodeKey || ctx.currentKey) {
-      const k = ctx.lastNodeKey || ctx.currentKey;
-      ctx.addLine(`let templateId${componentID} = ${locationExpr}\` + ${k};`);
-    } else {
-      locationExpr += ctx.loopNumber ? `\${i${ctx.loopNumber}}__\`` : "`";
-      ctx.addLine(`let templateId${componentID} = ${locationExpr};`);
-    }
-    const templateId = `templateId${componentID}`;
-
+    const templateKey = ctx.generateTemplateKey();
     let ref = node.getAttribute("t-ref");
     let refExpr = "";
     let refKey: string = "";
@@ -334,7 +322,7 @@ QWeb.addDirective({
     }
 
     ctx.addLine(
-      `let w${componentID} = ${templateId} in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[${templateId}]] : false;`
+      `let w${componentID} = ${templateKey} in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[${templateKey}]] : false;`
     );
     let shouldProxy = !ctx.parentNode;
     if (shouldProxy) {
@@ -421,7 +409,7 @@ QWeb.addDirective({
       `if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
     );
     ctx.addLine(`w${componentID} = new W${componentID}(parent, props${componentID});`);
-    ctx.addLine(`parent.__owl__.cmap[${templateId}] = w${componentID}.__owl__.id;`);
+    ctx.addLine(`parent.__owl__.cmap[${templateKey}] = w${componentID}.__owl__.id;`);
 
     if (hasSlots) {
       const clone = <Element>node.cloneNode(true);
@@ -451,7 +439,7 @@ QWeb.addDirective({
     ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars}, sibling);`);
     // hack: specify empty remove hook to prevent the node from being removed from the DOM
     ctx.addLine(
-      `let pvnode = h('dummy', {key: ${templateId}, hook: {insert(vn) { let nvn=w${componentID}.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeComponentCode}}}});`
+      `let pvnode = h('dummy', {key: ${templateKey}, hook: {insert(vn) { let nvn=w${componentID}.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeComponentCode}}}});`
     );
     ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
     ctx.addLine(

src/qweb/compilation_context.ts

@@ -47,6 +47,30 @@ export class CompilationContext {
     return id;
   }
 
+  /**
+   * This method generates a "template key", which is basically a unique key
+   * which depends on the currently set keys, and on the iteration numbers (if
+   * we are in a loop).
+   *
+   * Such a key is necessary when we need to associate an id to some element
+   * generated by a template (for example, a component)
+   */
+  generateTemplateKey(): string {
+    const id = this.generateID();
+    let locationExpr = `\`__${this.generateID()}__`;
+    for (let i = 0; i < this.loopNumber - 1; i++) {
+      locationExpr += `\${i${i + 1}}__`;
+    }
+    if (this.lastNodeKey || this.currentKey) {
+      const k = this.lastNodeKey || this.currentKey;
+      this.addLine(`let k${id} = ${locationExpr}\` + ${k};`);
+    } else {
+      locationExpr += this.loopNumber ? `\${i${this.loopNumber}}__\`` : "`";
+      this.addLine(`let k${id} = ${locationExpr};`);
+    }
+    return `k${id}`;
+  }
+
   generateCode(): string[] {
     const shouldTrackScope = this.shouldTrackScope && this.scopeVars.length;
     if (shouldTrackScope) {

src/qweb/extensions.ts

@@ -231,7 +231,17 @@ QWeb.addDirective({
     const type = node.getAttribute("type");
     let handler;
     let event = fullName.includes(".lazy") ? "change" : "input";
-    const expr = ctx.formatExpression(value);
+
+    // we keep here a reference to the "base expression" (if the expression
+    // is `t-model="some.expr.value", then the base expression is "some.expr").
+    // This is necessary so we can capture it in the handler closure.
+    let expr = ctx.formatExpression(value);
+    const index = expr.lastIndexOf(".");
+    const baseExpr = expr.slice(0, index);
+    ctx.addLine(`let expr${nodeID} = ${baseExpr};`);
+
+    expr = `expr${nodeID}.${expr.slice(index + 1)}`;
+    const key = ctx.generateTemplateKey();
     if (node.tagName === "select") {
       ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);
       addNodeHook("create", `n.elm.value=${expr};`);
@@ -255,10 +265,8 @@ QWeb.addDirective({
       }
       handler = `(ev) => {${expr} = ${valueCode}}`;
     }
-    ctx.addLine(
-      `extra.handlers['${event}' + ${nodeID}] = extra.handlers['${event}' + ${nodeID}] || (${handler});`
-    );
-    ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`);
+    ctx.addLine(`extra.handlers[${key}] = extra.handlers[${key}] || (${handler});`);
+    ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers[${key}];`);
   }
 });