fix #136, support watch exprs and two way bindings for component fields

lib/src/analyzer.dart

 // Copyright (c) 2012, 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.
 
 /**
  * Part of the template compilation that concerns with extracting information
  * from the HTML parse tree.
  */
 library analyzer;
 
@@ skipping 84 matching lines @@
   void visitElementInfo(ElementInfo info) {
     var node = info.node;
 
     if (node.id != '') info.identifier = '__${toCamelCase(node.id)}';
     if (node.tagName == 'body' || (_currentInfo is ComponentInfo
           && (_currentInfo as ComponentInfo).template == node)) {
       info.isRoot = true;
       info.identifier = '_root';
     }
 
-    node.attributes.forEach((k, v) => visitAttribute(info, k, v));
-
     _bindCustomElement(node, info);
 
     var lastInfo = _currentInfo;
     if (node.tagName == 'element') {
       // If element is invalid _ElementLoader already reported an error, but
       // we skip the body of the element here.
       var name = node.attributes['name'];
       if (name == null) return;
       var component = _fileInfo.components[name];
       if (component == null) return;
 
       // Associate ElementInfo of the <element> tag with its component.
       component.elemInfo = info;
 
       _bindExtends(component);
 
       _currentInfo = component;
     }
 
+    node.attributes.forEach((k, v) => visitAttribute(info, k, v));

[Jennifer Messerly, 2012/11/29 05:34:35]

needs to happen after we bind "extends"

+
     var savedParent = _parent;
     _parent = info;
 
     // Invoke super to visit children.
     super.visitElement(node);
     _currentInfo = lastInfo;
 
     _parent = savedParent;
 
     if (_needsIdentifier(info)) {
@@ skipping 195 matching lines @@
       attrInfo = _readAttribute(info, name, value);
     }
 
     if (attrInfo != null) {
       info.attributes[name] = attrInfo;
       info.hasDataBinding = true;
     }
   }
 
   bool _readDataValue(ElementInfo info, String value) {
+    messages.warning('data-value is deprecated. '
+        'Given data-value="fieldName:expr", replace it with '
+        'field-name="{{expr}}". Unlike data-value "expr" will be watched and '

[Siggi Cherem (dart-lang), 2012/11/29 18:06:57]

add comma?
Unlike data-value, "expr" ...

[Jennifer Messerly, 2012/11/30 03:21:41]

Done.

+        'fieldName will automatically update. You may also use '
+        'bind-field-name="dartAssignableValue" to get two-way data binding.',
+        info.node.sourceSpan, file: _fileInfo.path);
+
     var colonIdx = value.indexOf(':');
     if (colonIdx <= 0) {
       messages.error('data-value attribute should be of the form '
           'data-value="name:value" or data-value='
           '"name1:value1,name2:value2,..." for multiple assigments.',
           info.node.sourceSpan, file: _fileInfo.path);
       return false;
     }
     var name = value.substring(0, colonIdx);
     value = value.substring(colonIdx + 1);
@@ skipping 71 matching lines @@
     var name = value.substring(0, colonIdx);
     value = value.substring(colonIdx + 1);
 
     return _readTwoWayBinding(info, name, value);
   }
 
   // http://dev.w3.org/html5/spec/the-input-element.html#the-input-element
   /** Support for two-way bindings. */
   bool _readTwoWayBinding(ElementInfo info, String name, String bindingExpr) {
     var elem = info.node;
-    var isInput = elem.tagName == 'input';
-    var isTextArea = elem.tagName == 'textarea';
-    var isSelect = elem.tagName == 'select';
+
+    // Find the HTML tag name.
+    var isInput = info.baseTagName == 'input';
+    var isTextArea = info.baseTagName == 'textarea';
+    var isSelect = info.baseTagName == 'select';
     var inputType = elem.attributes['type'];
 
     String eventName;
 
     // Special two-way binding logic for input elements.
     if (isInput && name == 'checked') {
       if (inputType == 'radio') {
         if (!_isValidRadioButton(info)) return false;
       } else if (inputType != 'checkbox') {
         messages.error('checked is only supported in HTML with type="radio" '
             'or type="checked".', info.node.sourceSpan, file: _fileInfo.path);
         return false;
       }
 
       // Both 'click' and 'change' seem reliable on all the modern browsers.
       eventName = 'change';
     } else if (isSelect && (name == 'selectedIndex' || name == 'value')) {
       eventName = 'change';
     } else if (isInput && name == 'value' && inputType == 'radio') {
       return _addRadioValueBinding(info, bindingExpr);
     } else if (isTextArea && name == 'value' || isInput &&
         (name == 'value' || name == 'valueAsDate' || name == 'valueAsNumber')) {
       // Input event is fired more frequently than "change" on some browsers.
       // We want to update the value for each keystroke.
       eventName = 'input';
+    } else if (info.component != null) {
+      // Assume we are binding a field on the component.
+      // TODO(jmesserly): validate this assumption about the user's code by
+      // using compile time mirrors.
+
+      _checkDuplicateAttribute(info, name);
+      info.attributes[name] = new AttributeInfo([bindingExpr],
+          customTwoWayBinding: true);
+      info.hasDataBinding = true;
+      return true;
+
     } else {
       messages.error('Unknown two-way binding attribute $name. Ignored.',
           info.node.sourceSpan, file: _fileInfo.path);
       return false;
     }
 
-    if (elem.attributes[name] != null) {
-      messages.warning('Duplicate attribute $name. You should provide either '
-          'the two-way binding or the attribute itself. The attribute will be '
-          'ignored.', info.node.sourceSpan, file: _fileInfo.path);
-      info.removeAttributes.add(name);
-    }
+    _checkDuplicateAttribute(info, name);
 
     info.attributes[name] = new AttributeInfo([bindingExpr]);
     _addEvent(info, eventName, (e) => '$bindingExpr = $e.$name');
     info.hasDataBinding = true;
     return true;
   }
 
+  void _checkDuplicateAttribute(ElementInfo info, String name) {
+    if (info.node.attributes[name] != null) {
+      messages.warning('Duplicate attribute $name. You should provide either '
+          'the two-way binding or the attribute itself. The attribute will be '
+          'ignored.', info.node.sourceSpan, file: _fileInfo.path);
+      info.removeAttributes.add(name);
+    }
+  }
+
   bool _isValidRadioButton(ElementInfo info) {
     if (info.attributes['checked'] == null) return true;
 
     messages.error('Radio buttons cannot have both "checked" and "value" '
         'two-way bindings. Either use checked:\n'
         '  <input type="radio" bind-checked="myBooleanVar">\n'
         'or value:\n'
         '  <input type="radio" bind-value="myStringVar" value="theValue">',
         info.node.sourceSpan, file: _fileInfo.path);
     return false;
@@ skipping 404 matching lines @@
     end = text.indexOf('}}', start);
     if (end < 0) {
       start = length;
       return false;
     }
     // For consistency, start and end both include the curly braces.
     end += 2;
     return true;
   }
 }