Support for observable models, fixes #259

lib/templating.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.
 
 /** Common utility functions used by code generated by the dwc compiler. */
 library templating;
 
 import 'dart:async';
+import 'dart:collection';
 import 'dart:html';
 import 'dart:uri';
 import 'package:web_ui/safe_html.dart';
+import 'package:web_ui/observe.dart';
 import 'package:web_ui/watcher.dart';
 
 /**
  * Take the value of a bound expression and creates an HTML node with its value.
  * Normally bindings are associated with text nodes, unless [binding] has the
  * [SafeHtml] type, in which case an html element is created for it.
  */
 Node nodeForBinding(binding) => binding is SafeHtml
     ? new Element.html(binding.toString()) : new Text(binding.toString());
 
@@ skipping 107 matching lines @@
  *   * binding classes with a string:
  *
  *         bindCssClasses(e, () => "${class1 != null ? class1 : ''} "
  *                                 "${class2 != null ? class2 : ''}");
  *
  *   * binding classes separately:
  *
  *         bindCssClasses(e, () => class1);
  *         bindCssClasses(e, () => class2);
  */
-WatcherDisposer bindCssClasses(Element elem, dynamic exp()) {
-  return watchAndInvoke(exp, (e) {
+ChangeUnobserver bindCssClasses(Element elem, dynamic exp()) {
+  return watchAndInvoke(_observeList(exp), (e) {
     updateCssClass(elem, false, e.oldValue);
     updateCssClass(elem, true, e.newValue);
   }, 'css-class-bind');
 }
 
 /** Bind the result of [exp] to the style attribute in [elem]. */
-WatcherDisposer bindStyle(Element elem, Map<String, String> exp()) {
-  return watchAndInvoke(exp, (e) {
+ChangeUnobserver bindStyle(Element elem, Map<String, String> exp()) {
+  return watchAndInvoke(_observeMap(exp), (e) {
     if (e.oldValue is Map<String, String>) {
       var props = e.newValue;
       if (props is! Map<String, String>) props = const {};
       for (var property in e.oldValue.keys) {
         if (!props.containsKey(property)) {
           // Value will not be overwritten with new setting. Remove.
           elem.style.removeProperty(property);
         }
       }
     }
@@ skipping 67 matching lines @@
 
   void remove() {
     _subscription.cancel();
     _subscription = null;
   }
 }
 
 /** Represents a generic data binding and a corresponding action. */
 class Binding extends TemplateItem {
   final exp;
-  final ValueWatcher action;
-  WatcherDisposer stopper;
+  final ChangeObserver action;
+  ChangeUnobserver stopper;
 
   Binding(this.exp, this.action);
 
   void insert() {
     if (stopper != null) throw new StateError('binding already attached');
     stopper = watchAndInvoke(exp, action, 'generic-binding');
   }
 
   void remove() {
     stopper();
     stopper = null;
   }
 }
 
 /** Represents a binding to a style attribute. */
 class StyleAttrBinding extends TemplateItem {
   final exp;
   final Element elem;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   StyleAttrBinding(this.elem, this.exp);
 
   void insert() {
     if (stopper != null) throw new StateError('style binding already attached');
     stopper = bindStyle(elem, exp);
   }
 
   void remove() {
     stopper();
     stopper = null;
   }
 }
 
 /** Represents a binding to a class attribute. */
 class ClassAttrBinding extends TemplateItem {
   final Element elem;
   final exp;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   ClassAttrBinding(this.elem, this.exp);
 
   void insert() {
     if (stopper != null) throw new StateError('class binding already attached');
     stopper = bindCssClasses(elem, exp);
   }
 
   void remove() {
     stopper();
@@ skipping 14 matching lines @@
    * or from a DOM property (which is internally also a Dart expression).
    */
   final Getter getter;
 
   /**
    * Whether this is a binding that assigns a DOM attribute accepting URL
    * values. If so, the value assigned to the attribute needs to be sanitized.
    */
   final bool isUrl;
 
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   DomPropertyBinding(this.getter, this.setter, this.isUrl);
 
   void insert() {
     if (stopper != null) throw new StateError('data binding already attached.');
     stopper = watchAndInvoke(getter, (e) {
       setter(isUrl ? sanitizeUri(e.newValue) : e.newValue);
     }, 'dom-property-binding');
   }
 
@@ skipping 43 matching lines @@
   final List<Node> nodes = [];
 
   Template(this.node);
 
   /** Associate the event listener while this template is visible.  */
   void listen(Stream<Event> stream, EventListener listener) {
     children.add(new Listener(stream, (e) { listener(e); dispatch(); }));
   }
 
   /** Run [action] when [exp] changes (while this template is visible).  */
-  void bind(exp, ValueWatcher action) {
+  void bind(exp, ChangeObserver action) {
     children.add(new Binding(exp, action));
   }
 
   /** Create and bind a [Node] to [exp] while this template is visible. */
   Node contentBind(Function exp) {
     var bindNode = new Text('');
     children.add(new Binding(() => '${exp()}', (e) {
       bindNode = updateBinding(exp(), bindNode, e.newValue);
     }));
     return bindNode;
@@ skipping 84 matching lines @@
 // </tr>
 //
 // We can't necessarily rely on child position because of possible mutation,
 // unless we're willing to say that "if" requires a fixed number of children.
 // If that's the case, we need a way to check for this error case and alert the
 // developer.
 abstract class PlaceholderTemplate extends Template {
   /** Expression watch by this template (condition or loop expression). */
   final exp;
 
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   PlaceholderTemplate(Node reference, this.exp)
       : super(reference);
 
   // Delay creating the template body until this is inserted.
   void create() {}
 
   void insert() {
     super.create();
     if (nodes.length > 0) {
@@ skipping 47 matching lines @@
     }, 'conditional-binding');
   }
 
   void remove() {
     super.remove();
     stopper();
     stopper = null;
   }
 }
 
+_observeList(exp) {
+  if (!useObservers) return exp;
+
+  // TODO(jmesserly): implement detailed change records in Observable* types,
+  // so we can observe the list itself and react to all changes.
+  // For now we call .toList which causes us to depend on all items. This
+  // also works for Iterables.
+  return () {
+    var x = exp();
+    return x is Iterable ? x.toList() : x;
+  };
+}
+
+_observeMap(exp) {
+  if (!useObservers) return exp;
+
+  // TODO(jmesserly): this has similar issues as _observeList. Ideally
+  // observers can observe all changes to the resulting map, so we don't need a
+  // copy here.
+  return () {
+    var x = exp();
+    return x is Map ? new LinkedHashMap.from(x) : x;
+  };
+}
+
 /** Function to set up the contents of a loop template. */
 typedef void LoopIterationSetup(loopVariable, Template template);
 
 /** A template loop of the form `<template iterate="x in list ">`. */
 class LoopTemplate extends PlaceholderTemplate {
   final LoopIterationSetup iterSetup;
 
   LoopTemplate(Node reference, exp, this.iterSetup) : super(reference, exp);
 
   void insert() {
-    stopper = watchAndInvoke(exp, (e) {
+    stopper = watchAndInvoke(_observeList(exp), (e) {
       super.remove();
       for (var x in e.newValue) {
         iterSetup(x, this);
       }
       super.insert();
     }, 'loop-binding');
   }
 
   void remove() {
     super.remove();
     stopper();
     stopper = null;
   }
 }
 
 /**
  * A template loop of the form `<td template iterate="x in list ">`. Unlike
  * [LoopTemplate], here we insert children directly then node annotated with the
  * template attribute.
  */
 class LoopTemplateInAttribute extends Template {
   final LoopIterationSetup iterSetup;
   final exp;
-  WatcherDisposer stopper;
+  ChangeUnobserver stopper;
 
   LoopTemplateInAttribute(Node node, this.exp, this.iterSetup) : super(node);
 
   // Delay creating the template body until this is inserted.
   void create() {}
 
   void insert() {
-    stopper = watchAndInvoke(exp, (e) {
+    stopper = watchAndInvoke(_observeList(exp), (e) {
       _removeInternal();
       for (var x in e.newValue) {
         iterSetup(x, this);
       }
       super.create();
       node.nodes.addAll(nodes);
       super.insert();
     }, 'loop-attribute-binding');
   }
 
   void _removeInternal() {
     super.remove();
     node.nodes.clear();
     nodes.clear();
   }
 
   void remove() {
     _removeInternal();
     stopper();
     stopper = null;
   }
 }