feat(mustache): Move unobserved mustache attributes to the flush phase

Closes #734

Author: vicb

lib/core_dom/directive.dart

@@ -1,10 +1,11 @@
 part of angular.core.dom;
 
-/**
- * Callback function used to notify of attribute changes.
- */
+/// Callback function used to notify of attribute changes.
 typedef AttributeChanged(String newValue);
 
+/// Callback function used to notify of observer changes.
+typedef void ObserverChanged(bool hasListeners);
+
 /**
  * NodeAttrs is a facade for element attributes. The facade is responsible
  * for normalizing attribute names as well as allowing access to the
@@ -15,6 +16,8 @@ class NodeAttrs {
 
   Map<String, List<AttributeChanged>> _observers;
 
+  Map<String, List<ObserverChanged>> _observerListeners = {};
+
   NodeAttrs(this.element);
 
   operator [](String attributeName) => element.attributes[attributeName];
@@ -41,6 +44,10 @@ class NodeAttrs {
               .add(notifyFn);
 
     notifyFn(this[attributeName]);
+
+    if (_observerListeners.containsKey(attributeName)) {
+      _observerListeners[attributeName].forEach((cb) => cb(true));
+    }
   }
 
   void forEach(void f(String k, String v)) {
@@ -51,6 +58,15 @@ class NodeAttrs {
       element.attributes.containsKey(attributeName);
 
   Iterable<String> get keys => element.attributes.keys;
+
+  void listenObserverChanges(String attributeName, ObserverChanged fn) {
+    if (_observerListeners == null) {
+      _observerListeners = <String, List<ObserverChanged>>{};
+    }
+    _observerListeners.putIfAbsent(attributeName, () => <ObserverChanged>[])
+                      .add(fn);
+    fn(false);
+  }
 }
 
 /**

lib/core_dom/ng_mustache.dart

@@ -18,26 +18,30 @@ class NgTextMustacheDirective {
     AST ast = new PureFunctionAST('[[$markup]]', new ArrayFn(), items);
     scope.watch(ast, interpolation.call, readOnly: true);
   }
-
 }
 
 // This Directive is special and does not go through injection.
 @NgDirective(selector: r'[*=/{{.*}}/]')
 class NgAttrMustacheDirective {
+  bool _hasObservers;
+  Watch _watch;
+
+  // This Directive is special and does not go through injection.
   NgAttrMustacheDirective(NodeAttrs attrs,
                           String markup,
                           Interpolate interpolate,
                           Scope scope,
                           AstParser parser,
                           FilterMap filters) {
+
     var eqPos = markup.indexOf('=');
     var attrName = markup.substring(0, eqPos);
     var attrValue = markup.substring(eqPos + 1);
-    Interpolation interpolation = interpolate(attrValue);
     var lastValue = markup;
-    interpolation.setter = (text) {
+    Interpolation interpolation = interpolate(attrValue)..setter = (text) {
       if (lastValue != text) lastValue = attrs[attrName] = text;
     };
+
     // TODO(misko): figure out how to remove call to setter. It slows down
     // View instantiation
     interpolation.setter('');
@@ -47,16 +51,14 @@ class NgAttrMustacheDirective {
         .toList();
 
     AST ast = new PureFunctionAST('[[$markup]]', new ArrayFn(), items);
-    /*
-      Attribute bindings are tricky. They need to be resolved on digest
-      inline with components so that any bindings to component can
-      be resolved before the component attach method. But once the
-      component is attached we need to run on the flush cycle rather
-      then digest cycle.
-     */
-    // TODO(misko): figure out how to get most of these on observe rather then
-    // watch.
-    scope.watch(ast, interpolation.call);
+
+    attrs.listenObserverChanges(attrName, (hasObservers) {
+      if (_hasObservers != hasObservers) {
+        hasObservers = hasObservers;
+        if (_watch != null) _watch.remove();
+        _watch = scope.watch(ast, interpolation.call, readOnly: !hasObservers);
+      }
+    });
   }
 }
 

test/core_dom/ng_mustache_spec.dart

@@ -110,7 +110,7 @@ main() {
 
 }
 
-@NgFilter(name:'hello')
+@NgFilter(name: 'hello')
 class _HelloFilter {
   call(String str) {
     return 'Hello, $str!';