Template bug fixes and new features.

utils/template/codegen.dart

 // Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 class CGBlock {
   int _blockType;             // Code type of this block
   int _indent;                // Number of spaces to prefix for each statement
   bool _inEach;               // This block or any currently active blocks is a
                               // #each.  If so then any element marked with a
                               // var attribute is repeated therefore the var
                               // is a List type instead of an Element type.
+  String _localName;          // optional local name for #each or #with
   List<CGStatement> _stmts;
   int localIndex;             // Local variable index (e.g., e0, e1, etc.)
 
   // Block Types:
   static final int CONSTRUCTOR = 0;
   static final int EACH = 1;
   static final int WITH = 2;
 
   CGBlock([this._indent = 4,
            this._blockType = CGBlock.CONSTRUCTOR,
-           this._inEach = false]) :
+           this._inEach = false,
+           this._localName = null]) :
       _stmts = new List<CGStatement>(), localIndex = 0 {
     assert(_blockType >= CGBlock.CONSTRUCTOR && _blockType <= CGBlock.WITH);
   }
 
   bool get isConstructor() => _blockType == CGBlock.CONSTRUCTOR;
   bool get isEach() => _blockType == CGBlock.EACH;
   bool get isWith() => _blockType == CGBlock.WITH;
 
+  bool get hasLocalName() => _localName != null;
+  String get localName() => _localName;
+
   CGStatement push(var elem, var parentName, [bool exact = false]) {
     var varName;
     if (elem is TemplateElement && elem.hasVar) {
       varName = elem.varName;
     } else {
       varName = localIndex++;
     }
 
     CGStatement stmt = new CGStatement(elem, _indent, parentName, varName,
         exact, _inEach);
@@ skipping 65 matching lines @@
     }
 
     return buff.toString();
   }
 }
 
 class CGStatement {
   bool _exact;                  // If True not HTML construct instead exact stmt
   bool _repeating;              // Stmt in a #each this block or nested block.
   StringBuffer _buff;
-  TemplateElement _elem;
+  var _elem;
   int _indent;
   var parentName;
   String varName;
   bool _globalVariable;
   bool _closed;
 
   CGStatement(this._elem, this._indent, this.parentName, var varNameOrIndex,
       [this._exact = false, this._repeating = false]) :
         _buff = new StringBuffer(), _closed = false {
 
     if (varNameOrIndex is String) {
       // We have the global variable name
       varName = varNameOrIndex;
       _globalVariable = true;
     } else {
       // local index generate local variable name.
       varName = "e${varNameOrIndex}";
       _globalVariable = false;
     }
   }
 
   bool get hasGlobalVariable() => _globalVariable;
   String get variableName() => varName;
 
   String globalDeclaration() {
     if (hasGlobalVariable) {
       String spaces = Codegen.spaces(_indent);
       return (_repeating) ?
-        "  List ${varName};    // Repeated elements.\r" : "  var ${varName};\r";
+        "  List ${varName};    // Repeated elements.\n" : "  var ${varName};\n";
     }
 
     return "";
   }
 
   String globalInitializers() {
     if (hasGlobalVariable && _repeating) {
-      return "    ${varName} = [];\r";
+      return "    ${varName} = [];\n";
     }
 
     return "";
   }
 
   void add(String value) {
     _buff.add(value);
   }
 
   bool get isClosed() => _closed;
 
   void close() {
     if (_elem is TemplateElement) {
       add("</${_elem.tagName}>");
     }
     _closed = true;
   }
 
   String emitDartStatement() {
     StringBuffer statement = new StringBuffer();
 
     String spaces = Codegen.spaces(_indent);
 
     if (_exact) {
-      statement.add("${spaces}${_buff.toString()};\r");
+      statement.add("${spaces}${_buff.toString()};\n");
     } else {
       String localVar = "";
       String tmpRepeat;
       if (hasGlobalVariable) {
         if (_repeating) {
           tmpRepeat = "tmp_${varName}";
           localVar = "var ";
         }
       } else {
         localVar = "var ";
       }
 
       /* Emiting the following code fragment where varName is the attribute
          value for var=
 
             varName = new Element.html('HTML GOES HERE');
             parent.elements.add(varName);
 
          for repeating elements in a #each:
 
             var tmp_nnn = new Element.html('HTML GOES HERE');
             varName.add(tmp_nnn);
             parent.elements.add(tmp_nnn);
 
          for elements w/o var attribute set:
 
             var eNNN = new Element.html('HTML GOES HERE');
             parent.elements.add(eNNN);
        */
-      if (tmpRepeat == null) {
-        statement.add("${spaces}${localVar}${varName} = new Element.html('");
+      if (_elem is TemplateCall) {
+        // Call template NameEntry2
+        String cls = _elem.toCall;
+        String params = _elem.params;
+        statement.add("\n${spaces}// Call template ${cls}.\n");
+        statement.add(
+            "${spaces}${localVar}${varName} = new ${cls}${params};\n");
+        statement.add(
+            "${spaces}${parentName}.elements.add(${varName}.root);\n");
       } else {
-        statement.add("${spaces}${localVar}${tmpRepeat} = new Element.html('");
-      }
-      statement.add(_buff.toString());
+        bool isTextNode = _elem is TemplateText;
+        String createType = isTextNode ? "Text" : "Element.html";
+        if (tmpRepeat == null) {
+          statement.add("${spaces}${localVar}${varName} = new ${createType}('");
+        } else {
+          statement.add(
+              "${spaces}${localVar}${tmpRepeat} = new ${createType}('");
+        }
+        statement.add(isTextNode ? _buff.toString().trim() : _buff.toString());
 
-      if (tmpRepeat == null) {
-        statement.add(
-          "');\r${spaces}${parentName}.elements.add(${varName});\r");
-      } else {
-        statement.add(
-          "');\r${spaces}${parentName}.elements.add(${tmpRepeat});\r");
-        statement.add("${spaces}${varName}.add(${tmpRepeat});\r");
+        if (tmpRepeat == null) {
+          statement.add(
+            "');\n${spaces}${parentName}.elements.add(${varName});\n");
+        } else {
+          statement.add(
+            "');\n${spaces}${parentName}.elements.add(${tmpRepeat});\n");
+          statement.add("${spaces}${varName}.add(${tmpRepeat});\n");
+        }
       }
     }
 
     return statement.toString();
   }
 }
 
 class Codegen {
   static final String SPACES = "                                              ";
   static String spaces(int numSpaces) {
@@ skipping 11 matching lines @@
   //              the HTML tree looking for a parent template prefix that
   //              matches the CSS prefix. (more thinking needed).
   static String generate(List<Template> templates, String filename) {
     List<String> fileParts = filename.split('.');
     assert(fileParts.length == 2);
     filename = fileParts[0];
 
     StringBuffer buff = new StringBuffer();
     int injectId = 0;         // Inject function id
 
-    buff.add("// Generated Dart class from HTML template.\r");
-    buff.add("// DO NOT EDIT.\r\r");
+    buff.add("// Generated Dart class from HTML template.\n");
+    buff.add("// DO NOT EDIT.\n\n");
 
-    buff.add("String safeHTML(String html) {\r");
-    buff.add("  // TODO(terry): Escaping for XSS vulnerabilities TBD.\r");
-    buff.add("  return html;\r");
-    buff.add("}\r\r");
+    buff.add("String safeHTML(String html) {\n");
+    buff.add("  // TODO(terry): Escaping for XSS vulnerabilities TBD.\n");
+    buff.add("  return html;\n");
+    buff.add("}\n\n");
 
     String addStylesheetFuncName = "add_${filename}_templatesStyles";
     
     for (final template in templates) {
       // Emit the template class.
       TemplateSignature sig = template.signature;
       buff.add(_emitClass(sig.name, sig.params, template.content,
         addStylesheetFuncName));
     }
 
     // TODO(terry): Stylesheet aggregator should not be global needs to be
     //              bound to this template file not global to the app.
 
     // Emit the stylesheet aggregator.
-    buff.add("\r\r// Inject all templates stylesheet once into the head.\r");
-    buff.add("bool ${filename}_stylesheet_added = false;\r");
-    buff.add("void ${addStylesheetFuncName}() {\r");
-    buff.add("  if (!${filename}_stylesheet_added) {\r");
-    buff.add("    StringBuffer styles = new StringBuffer();\r\r");
+    buff.add("\n\n// Inject all templates stylesheet once into the head.\n");
+    buff.add("bool ${filename}_stylesheet_added = false;\n");
+    buff.add("void ${addStylesheetFuncName}() {\n");
+    buff.add("  if (!${filename}_stylesheet_added) {\n");
+    buff.add("    StringBuffer styles = new StringBuffer();\n\n");
 
-    buff.add("    // All templates stylesheet.\r");
+    buff.add("    // All templates stylesheet.\n");
 
     for (final template in templates) {
       TemplateSignature sig = template.signature;
-      buff.add("    styles.add(${sig.name}.stylesheet);\r");
+      buff.add("    styles.add(${sig.name}.stylesheet);\n");
     }
 
-    buff.add("\r    ${filename}_stylesheet_added = true;\r");
+    buff.add("\n    ${filename}_stylesheet_added = true;\n");
 
     buff.add("    document.head.elements.add(new Element.html('<style>"
-             "\${styles.toString()}</style>'));\r");
-    buff.add("  }\r");
-    buff.add("}\r");
+             "\${styles.toString()}</style>'));\n");
+    buff.add("  }\n");
+    buff.add("}\n");
 
     return buff.toString();
   }
 
   static String _emitCSSSelectors(css.Stylesheet stylesheet) {
     if (stylesheet == null) {
       return "";
     }
 
     List<String> classes = [];
@@ skipping 22 matching lines @@
           // Character between 'a'..'z' mapped to 'A'..'Z'
           dartName.add("${part[0].toUpperCase()}${part.substring(1)}");
         }
         dartNames.add(dartName.toString());
       }
     }
 
     StringBuffer buff = new StringBuffer();
     if (classes.length > 0) {
       assert(classes.length == dartNames.length);
-      buff.add("\r  // CSS class selectors for this template.\r");
+      buff.add("\n  // CSS class selectors for this template.\n");
       for (int i = 0; i < classes.length; i++) {
         buff.add(
-          "  static String get ${dartNames[i]}() => \"${classes[i]}\";\r");
+          "  static String get ${dartNames[i]}() => \"${classes[i]}\";\n");
       }
     }
 
     return buff.toString();
   }
 
   static String _emitClass(String className,
                            List<Map<Identifier, Identifier>> params,
                            TemplateContent content,
                            String addStylesheetFuncName) {
     StringBuffer buff = new StringBuffer();
 
     // Emit the template class.
-    buff.add("class ${className} {\r");
+    buff.add("class ${className} {\n");
 
-    buff.add("  Element _fragment;\r\r");
+    buff.add("  Map<String, Object> _scopes;\n");
+    buff.add("  Element _fragment;\n\n");
 
     bool anyParams = false;
     for (final param in params) {
-      buff.add("  ${param['type']} ${param['name']};\r");
+      buff.add("  ${param['type']} ${param['name']};\n");
       anyParams = true;
     }
-    if (anyParams) buff.add("\r");
+    if (anyParams) buff.add("\n");
 
     ElemCG ecg = new ElemCG();
 
-    ecg.pushBlock();
+    if (!ecg.pushBlock()) {
+      world.error("Error at ${content}");
+    }
 
-    // TODO(terry): Only supports singlely rooted need to fix.
-    ecg.emitConstructHtml(content.html.children[0], "", "_fragment");
+    var root = content.html.children[0];
+    bool firstTime = true;
+    for (var child in root.children) {
+      if (child is TemplateText) {
+        if (!firstTime) {
+          ecg.closeStatement();
+        }
+        CGStatement stmt = ecg.pushStatement(child, "_fragment");
+      }
+      ecg.emitConstructHtml(child, "", "_fragment");
+      firstTime = false;
+    }
 
     // Create all element names marked with var.
     String decls = ecg.globalDeclarations;
     if (decls.length > 0) {
-      buff.add("\r  // Elements bound to a variable:\r");
-      buff.add("${decls}\r");
+      buff.add("\n  // Elements bound to a variable:\n");
+      buff.add("${decls}\n");
     }
 
     // Create the constructor.
     buff.add("  ${className}(");
     bool firstParam = true;
     for (final param in params) {
       if (!firstParam) {
         buff.add(", ");
       }
       buff.add("this.${param['name']}");
       firstParam = false;
     }
-    buff.add(") {\r");
+    buff.add(") : _scopes = new Map<String, Object>() {\n");
 
     String initializers = ecg.globalInitializers;
     if (initializers.length > 0) {
-      buff.add("    //Global initializers.\r");
-      buff.add("${initializers}\r");
+      buff.add("    //Global initializers.\n");
+      buff.add("${initializers}\n");
     }
 
-    buff.add("    // Insure stylesheet for template exist in the document.\r");
-    buff.add("    ${addStylesheetFuncName}();\r\r");
+    buff.add("    // Insure stylesheet for template exist in the document.\n");
+    buff.add("    ${addStylesheetFuncName}();\n\n");
 
-    buff.add("    _fragment = new Element.tag('div');\r");
+    buff.add("    _fragment = new DocumentFragment();\n");
 
     buff.add(ecg.codeBody);     // HTML for constructor to build.
 
-    buff.add("  }\r\r");        // End constructor
+    buff.add("  }\n\n");        // End constructor
 
-    buff.add("  Element get root() => _fragment.nodes.first;\r");
+    buff.add("  Element get root() => _fragment;\n");
 
     // Emit all CSS class selectors:
     buff.add(_emitCSSSelectors(content.css));
 
     // Emit the injection functions.
-    buff.add("\r  // Injection functions:");
+    buff.add("\n  // Injection functions:");
     for (final expr in ecg.expressions) {
       buff.add("${expr}");
     }
 
-    buff.add("\r  // Each functions:\r");
+    buff.add("\n  // Each functions:\n");
     for (var eachFunc in ecg.eachs) {
-      buff.add("${eachFunc}\r");
+      buff.add("${eachFunc}\n");
     }
 
-    buff.add("\r  // With functions:\r");
+    buff.add("\n  // With functions:\n");
     for (var withFunc in ecg.withs) {
-      buff.add("${withFunc}\r");
+      buff.add("${withFunc}\n");
     }
 
-    buff.add("\r  // CSS for this template.\r");
+    buff.add("\n  // CSS for this template.\n");
     buff.add("  static final String stylesheet = ");
 
     if (content.css != null) {
-      buff.add("\'\'\'\r    ${content.css.toString()}\r");
-      buff.add("  \'\'\';\r\r");
+      buff.add("\'\'\'\n    ${content.css.toString()}\n");
+      buff.add("  \'\'\';\n\n");
 
       // TODO(terry): Emit all known selectors for this template.
-      buff.add("  // Stylesheet class selectors:\r");
+      buff.add("  // Stylesheet class selectors:\n");
     } else {
-      buff.add("\"\";\r");
+      buff.add("\"\";\n");
     }
 
-    buff.add("}\r");              // End class
+    buff.add("}\n");              // End class
 
     return buff.toString();
   }
 }
 
 class ElemCG {
   // List of identifiers and quoted strings (single and double quoted).
   var identRe = const RegExp(
     "\s*('\"\\'\\\"[^'\"\\'\\\"]+'\"\\'\\\"|[_A-Za-z][_A-Za-z0-9]*)");
 
@@ skipping 12 matching lines @@
     withs = [],
     _cgBlocks = [],
     _globalDecls = new StringBuffer(),
     _globalInits = new StringBuffer();    
 
   bool get isLastBlockConstructor() {
     CGBlock block = _cgBlocks.last();
     return block.isConstructor;
   }
 
+  List<String> activeBlocksLocalNames() {
+    List<String> result = [];
+
+    for (final CGBlock block in _cgBlocks) {
+      if (block.isEach || block.isWith) {
+        if (block.hasLocalName) {
+          result.add(block.localName);
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Active block with this localName.
+   */ 
+  bool matchBlocksLocalName(String name) {
+    for (final CGBlock block in _cgBlocks) {
+      if (block.isEach || block.isWith) {
+        if (block.hasLocalName && block.localName == name) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Any active blocks?
+   */
+  bool isNestedBlock() {
+    for (final CGBlock block in _cgBlocks) {
+      if (block.isEach || block.isWith) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Any active blocks with localName?
+   */
+  bool isNestedNamedBlock() {
+    for (final CGBlock block in _cgBlocks) {
+      if ((block.isEach || block.isWith) && block.hasLocalName) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   // Any current active #each blocks.
   bool anyEachBlocks(int blockToCreateType) {
     bool result = blockToCreateType == CGBlock.EACH;
 
     for (final CGBlock block in _cgBlocks) {
       if (block.isEach) {
         result = result || true;
       }
     }
 
     return result;
   }
 
-  void pushBlock([int indent = 4, int blockType = CGBlock.CONSTRUCTOR]) {
+  bool pushBlock([int indent = 4, int blockType = CGBlock.CONSTRUCTOR,
+                  String itemName = null]) {
     closeStatement();
-    _cgBlocks.add(new CGBlock(indent, blockType, anyEachBlocks(blockType)));
+    if (itemName != null && matchBlocksLocalName(itemName)) {
+      world.error("Active block already exist with local name: ${itemName}.");
+      return false;
+    } else if (itemName == null && this.isNestedBlock()) {
+      world.error('''
+Nested #each or #with must have a localName;
+ \n  #each list [localName]\n  #with object [localName]''');
+      return false;
+    }
+    _cgBlocks.add(
+        new CGBlock(indent, blockType, anyEachBlocks(blockType), itemName));
+
+    return true;
   }
 
   void popBlock() {
     _globalDecls.add(lastBlock.globalDeclarations);
     _globalInits.add(lastBlock.globalInitializers);
     _cgBlocks.removeLast();
   }
 
   CGStatement pushStatement(var elem, var parentName) {
     return lastBlock.push(elem, parentName, false);
@@ skipping 64 matching lines @@
             closeStatement();
           } else {
             closeStatement();
             emitConstructHtml(childElem, scopeName, prevParent);
             closeStatement();
           }
         } else {
           emitElement(childElem, scopeName, parentVarOrIdx);
         }
       }
+
+      // Close this tag.
+      closeStatement();
     } else if (elem is TemplateText) {
       add("${elem.value}");
     } else if (elem is TemplateExpression) {
       emitExpressions(elem, scopeName);
     } else if (elem is TemplateEachCommand) {
       // Signal to caller new block coming in, returns "each_" prefix
-      emitEach(elem, "List", elem.listName.name, "parent", immediateNestedEach);
+      emitEach(elem, "List", elem.listName.name, "parent", immediateNestedEach,
+          elem.hasLoopItem ? elem.loopItem.name : null);
     } else if (elem is TemplateWithCommand) {
       // Signal to caller new block coming in, returns "each_" prefix
-      emitWith(elem, "var", elem.objectName.name, "parent");
+      emitWith(elem, "var", elem.objectName.name, "parent",
+          elem.hasBlockItem ? elem.blockItem.name : null);
+    } else if (elem is TemplateCall) {
+      emitCall(elem, parentVarOrIdx);
     }
   }
 
   // TODO(terry): Hack prefixing all names with "${scopeName}." but don't touch
   //              quoted strings.
   String _resolveNames(String expr, String prefixPart) {
     StringBuffer newExpr = new StringBuffer();
     Iterable<Match> matches = identRe.allMatches(expr);
 
     int lastIdx = 0;
@@ skipping 33 matching lines @@
    *              control structures (with, each, if, etc.). We could
    *              synthesize a root node and create all the top-level nodes
    *              under the root node with one innerHTML.
    */
   void emitConstructHtml(var elem,
                          [String scopeName = "",
                           String parentName = "parent",
                           var varIndex = 0,
                           bool immediateNestedEach = false]) {
     if (elem is TemplateElement) {
-      // Never look at the root node (fragment) get it's children.
-      if (elem.isFragment) {
-        elem = elem.children[0];
-      }
-
       CGStatement stmt = pushStatement(elem, parentName);
       emitElement(elem, scopeName, stmt.hasGlobalVariable ?
           stmt.variableName : varIndex);
     } else {
       emitElement(elem, scopeName, varIndex, immediateNestedEach);
     }
   }
 
   /* Any references to products.sales needs to be remaped to item.sales
    * for now it's a hack look for first dot and replace with item.
    */
   String eachIterNameToItem(String iterName) {
     String newName = iterName;
     var dotForIter = iterName.indexOf('.');
     if (dotForIter >= 0) {
-      newName = "item${iterName.substring(dotForIter)}";
+      newName = "_item${iterName.substring(dotForIter)}";
     }
 
     return newName;
   }
 
   emitExpressions(TemplateExpression elem, String scopeName) {
     StringBuffer func = new StringBuffer();
 
     String newExpr = elem.expression;
-    if (scopeName.length > 0) {
+    bool anyNesting = isNestedNamedBlock();
+    if (scopeName.length > 0 && !anyNesting) {
       // In a block #command need the scope passed in.
-      add("\$\{inject_${expressions.length}(item)\}");
-      func.add("\r  String inject_${expressions.length}(var item) {\r");
+      add("\$\{inject_${expressions.length}(_item)\}");
+      func.add("\n  String inject_${expressions.length}(var _item) {\n");
       // Escape all single-quotes, this expression is embedded as a string 
       // parameter for the call to safeHTML.
-      newExpr = _resolveNames(newExpr.replaceAll("'", "\\'"), "item");
+      newExpr = _resolveNames(newExpr.replaceAll("'", "\\'"), "_item");
     } else {
       // Not in a block #command item isn't passed in.
       add("\$\{inject_${expressions.length}()\}");
-      func.add("\r  String inject_${expressions.length}() {\r");
+      func.add("\n  String inject_${expressions.length}() {\n");
+
+      if (anyNesting) {
+        func.add(defineScopes());
+      }
     }
 
-    func.add("    return safeHTML('\$\{${newExpr}\}');\r");
-    func.add("  }\r");
+    // Construct the active scope names for name resolution.
+
+    func.add("    return safeHTML('\$\{${newExpr}\}');\n");
+    func.add("  }\n");
 
     expressions.add(func.toString());
   }
+
+  emitCall(TemplateCall elem, String scopeName) {
+    pushStatement(elem, scopeName);
+  }
+
   emitEach(TemplateEachCommand elem, String iterType, String iterName,
-      var parentVarOrIdx, bool nestedImmediateEach) {
+      var parentVarOrIdx, bool nestedImmediateEach, [String itemName = null]) {
     TemplateDocument docFrag = elem.documentFragment;
 
     int eachIndex = eachs.length;
     eachs.add("");
 
     StringBuffer funcBuff = new StringBuffer();
     // Prepare function call "each_N(iterName," parent param computed later.
     String funcName = "each_${eachIndex}";
 
-    funcBuff.add("  ${funcName}(${iterType} items, Element parent) {\r");
-    funcBuff.add("    for (var item in items) {\r");
+    funcBuff.add("  ${funcName}(${iterType} items, Element parent) {\n");
 
-    pushBlock(6, CGBlock.EACH);
+    String paramName = injectParamName(itemName);
+    if (paramName == null) {
+      world.error("Use a different local name; ${itemName} is reserved.");
+    }
+    funcBuff.add("    for (var ${paramName} in items) {\n");
+
+    if (!pushBlock(6, CGBlock.EACH, itemName)) {
+      world.error("Error at ${elem}");
+    }
+
+    addScope(6, funcBuff, itemName);
 
     TemplateElement docFragChild = docFrag.children[0];
     var children = docFragChild.isFragment ?
         docFragChild.children : docFrag.children;
     for (var child in children) {
       // If any immediate children of the parent #each is an #each then
       // so we need to pass the outer #each parent not the last statement's
       // variableName when calling the nested #each.
       bool eachChild = (child is TemplateEachCommand);
       emitConstructHtml(child, iterName, parentVarOrIdx, 0, eachChild);
     }
 
     funcBuff.add(codeBody);
 
+    removeScope(6, funcBuff, itemName);
+
     popBlock();
 
-    funcBuff.add("    }\r");
-    funcBuff.add("  }\r");
+    funcBuff.add("    }\n");
+    funcBuff.add("  }\n");
 
     eachs[eachIndex] = funcBuff.toString();
 
     // If nested each then we want to pass the parent otherwise we'll use the
     // varName.
     var varName = nestedImmediateEach ? "parent" : lastBlock.last.variableName;
 
     pushExactStatement(elem, parentVarOrIdx);
 
     // Setup call to each func as "each_n(xxxxx, " the parent param is filled
     // in later when we known the parent variable.
-    add("${funcName}(${eachIterNameToItem(iterName)}, ${varName})");
-  }
+    String eachParam =
+        (itemName == null) ? eachIterNameToItem(iterName) : iterName;
+    add("${funcName}(${eachParam}, ${varName})");
+}
 
   emitWith(TemplateWithCommand elem, String withType, String withName,
-      var parentVarIndex) {
+      var parentVarIndex, [String itemName = null]) {
     TemplateDocument docFrag = elem.documentFragment;
 
     int withIndex = withs.length;
     withs.add("");
 
     StringBuffer funcBuff = new StringBuffer();
     // Prepare function call "each_N(iterName," parent param computed later.
     String funcName = "with_${withIndex}";
 
-    funcBuff.add("  ${funcName}(${withType} item, Element parent) {\r");
+    String paramName = injectParamName(itemName);
+    if (paramName == null) {
+      world.error("Use a different local name; ${itemName} is reserved.");
+    }
+    funcBuff.add("  ${funcName}(${withType} ${paramName}, Element parent) {\n");
 
-    pushBlock(CGBlock.WITH);
+    if (!pushBlock(4, CGBlock.WITH, itemName)) {
+      world.error("Error at ${elem}");
+    }
 
     TemplateElement docFragChild = docFrag.children[0];
     var children = docFragChild.isFragment ?
         docFragChild.children : docFrag.children;
     for (var child in children) {
       emitConstructHtml(child, withName, "parent");
     }
 
+    addScope(4, funcBuff, itemName);
     funcBuff.add(codeBody);
+    removeScope(4, funcBuff, itemName);
 
     popBlock();
 
-    funcBuff.add("  }\r");
+    funcBuff.add("  }\n");
 
     withs[withIndex] = funcBuff.toString();
 
     var varName = lastBlock.last.variableName;
 
     pushExactStatement(elem, parentVarIndex);
 
     // Setup call to each func as "each_n(xxxxx, " the parent param is filled
     // in later when we known the parent variable.
     add("${funcName}(${withName}, ${varName})");
   }
+
+  String injectParamName(String name) {
+    // Local name _item is reserved.
+    if (name != null && name == "_item") {
+      return null;    // Local name is not valid.
+    }
+
+    return (name == null) ? "_item" : name;
+  }
+
+  addScope(int indent, StringBuffer buff, String item) {
+    String spaces = Codegen.spaces(indent);
+
+    if (item == null) {
+      item = "_item";
+    }
+    buff.add("${spaces}_scopes[\"${item}\"] = ${item};\n");
+  }
+
+  removeScope(int indent, StringBuffer buff, String item) {
+    String spaces = Codegen.spaces(indent);
+
+    if (item == null) {
+      item = "_item";
+    }
+    buff.add("${spaces}_scopes.remove(\"${item}\");\n");
+  }
+
+  String defineScopes() {
+    StringBuffer buff = new StringBuffer();
+
+    // Construct the active scope names for name resolution.
+    List<String> names = activeBlocksLocalNames();
+    if (names.length > 0) {
+      buff.add("    // Local scoped block names.\n");
+      for (String name in names) {
+        buff.add("    var ${name} = _scopes[\"${name}\"];\n");
+      }
+      buff.add("\n");
+    }
+
+    return buff.toString();
+  }
+
 }