From 0a09c0c97649ba3507e25c03329a609d9dd5f99f Mon Sep 17 00:00:00 2001
From: Rafael Weinstein <rafaelw@chromium.org>
Date: Thu, 12 Dec 2013 10:10:45 -0800
Subject: [PATCH] Node.bind(name, observable)

This patch changes the Node.bind so that bind always takes a binding name and an observable. The implication of this is that creating observers is now always the concern of TemplateBinding (and in some case the registered delegate).

Note that NodeBinding is now gone. The observable is now serving the same purpose the NodeBinding was.

R=arv
BUG=

Review URL: https://codereview.appspot.com/40490043
---
 src/NodeBind.js | 371 +++++++++++++++++++++++-------------------------
 tests/tests.js  |  83 ++++++-----
 2 files changed, 216 insertions(+), 238 deletions(-)

diff --git a/src/NodeBind.js b/src/NodeBind.js
index 1729f20..aca78cc 100644
--- a/src/NodeBind.js
+++ b/src/NodeBind.js
@@ -53,19 +53,27 @@
     }
   }
 
-  Node.prototype.bind = function(name, model, path) {
-    console.error('Unhandled binding to Node: ', this, name, model, path);
+  Node.prototype.bind = function(name, observable) {
+    console.error('Unhandled binding to Node: ', this, name, observable);
   };
 
-  Node.prototype.unbind = function(name) {
-    if (!this.bindings)
-      this.bindings = {};
-    var binding = this.bindings[name];
+  function unbind(node, name) {
+    var bindings = node.bindings;
+    if (!bindings) {
+      node.bindings = {};
+      return;
+    }
+
+    var binding = bindings[name];
     if (!binding)
       return;
-    if (typeof binding.close === 'function')
-      binding.close();
-    this.bindings[name] = undefined;
+
+    binding.close();
+    bindings[name] = undefined;
+  }
+
+  Node.prototype.unbind = function(name) {
+    unbind(this, name);
   };
 
   Node.prototype.unbindAll = function() {
@@ -81,97 +89,60 @@
     this.bindings = {};
   };
 
-  var valuePath = Path.get('value');
-
-  function NodeBinding(node, property, model, path) {
-    this.closed = false;
-    this.node = node;
-    this.property = property;
-    this.model = model;
-    this.path = Path.get(path);
-    if ((this.model instanceof PathObserver ||
-         this.model instanceof CompoundPathObserver) &&
-         this.path === valuePath) {
-      this.observer = this.model;
-      this.observer.target = this;
-      this.observer.callback = this.valueChanged;
-    } else {
-      this.observer = new PathObserver(this.model, this.path,
-                                       this.valueChanged,
-                                       this);
-    }
-    this.valueChanged(this.value);
+  function sanitizeValue(value) {
+    return value === undefined || value === null ? '' : value;
   }
 
-  NodeBinding.prototype = {
-    valueChanged: function(value) {
-      this.node[this.property] = this.sanitizeBoundValue(value);
-    },
-
-    sanitizeBoundValue: function(value) {
-      return value == undefined ? '' : String(value);
-    },
+  function updateText(node, value) {
+    node.data = sanitizeValue(value);
+  }
 
-    close: function() {
-      if (this.closed)
-        return;
-      this.observer.close();
-      this.observer = undefined;
-      this.node = undefined;
-      this.model = undefined;
-      this.closed = true;
-    },
-
-    get value() {
-      return this.observer.value;
-    },
-
-    set value(value) {
-      this.observer.setValue(value);
-    },
-
-    reset: function() {
-      this.observer.reset();
-    }
-  };
+  function textBinding(node) {
+    return function(value) {
+      return updateText(node, value);
+    };
+  }
 
-  Text.prototype.bind = function(name, model, path) {
+  Text.prototype.bind = function(name, observable) {
     if (name !== 'textContent')
-      return Node.prototype.bind.call(this, name, model, path);
+      return Node.prototype.bind.call(this, name, observable);
 
-    this.unbind(name);
-    return this.bindings[name] = new NodeBinding(this, 'data', model, path);
+    unbind(this, 'textContent');
+    updateText(this, observable.open(textBinding(this)));
+    return this.bindings.textContent = observable;
   }
 
-  function AttributeBinding(element, attributeName, model, path) {
-    this.conditional = attributeName[attributeName.length - 1] == '?';
-    if (this.conditional) {
-      element.removeAttribute(attributeName);
-      attributeName = attributeName.slice(0, -1);
+  function updateAttribute(el, name, conditional, value) {
+    if (conditional) {
+      if (value)
+        el.setAttribute(name, '');
+      else
+        el.removeAttribute(name);
+      return;
     }
 
-    NodeBinding.call(this, element, attributeName, model, path);
+    el.setAttribute(name, sanitizeValue(value));
   }
 
-  AttributeBinding.prototype = createObject({
-    __proto__: NodeBinding.prototype,
-
-    valueChanged: function(value) {
-      if (this.conditional) {
-        if (value)
-          this.node.setAttribute(this.property, '');
-        else
-          this.node.removeAttribute(this.property);
-        return;
-      }
+  function attributeBinding(el, name, conditional) {
+    return function(value) {
+      updateAttribute(el, name, conditional, value);
+    };
+  }
 
-      this.node.setAttribute(this.property, this.sanitizeBoundValue(value));
+  Element.prototype.bind = function(name, observable) {
+    var conditional = name[name.length - 1] == '?';
+    if (conditional) {
+      this.removeAttribute(name);
+      name = name.slice(0, -1);
     }
-  });
 
-  Element.prototype.bind = function(name, model, path) {
-    this.unbind(name);
-    return this.bindings[name] = new AttributeBinding(this, name, model, path);
+    unbind(this, name);
+
+    updateAttribute(this, name, conditional,
+        observable.open(attributeBinding(this, name, conditional)));
+
+    return this.bindings[name] = observable;
   };
 
   var checkboxEventType;
@@ -214,36 +185,44 @@
     }
   }
 
-  function InputBinding(node, property, model, path) {
-    NodeBinding.call(this, node, property, model, path);
-    this.eventType = getEventForInputType(this.node);
-    this.boundNodeValueChanged = this.nodeValueChanged.bind(this);
-    this.node.addEventListener(this.eventType, this.boundNodeValueChanged,
-                               true);
+  function updateInput(input, property, value, santizeFn) {
+    input[property] = (santizeFn || sanitizeValue)(value);
   }
 
-  InputBinding.prototype = createObject({
-    __proto__: NodeBinding.prototype,
+  function inputBinding(input, property, santizeFn) {
+    return function(value) {
+      return updateInput(input, property, value, santizeFn);
+    }
+  }
 
-    nodeValueChanged: function() {
-      this.value = this.node[this.property];
-      this.reset();
-      this.postUpdateBinding();
-      Platform.performMicrotaskCheckpoint();
-    },
+  function noop() {}
 
-    postUpdateBinding: function() {},
+  function bindInputEvent(input, property, observable, postEventFn) {
+    var eventType = getEventForInputType(input);
 
-    close: function() {
-      if (this.closed)
+    function eventHandler() {
+      observable.setValue(input[property]);
+      observable.reset();
+      (postEventFn || noop)(input);
+      Platform.performMicrotaskCheckpoint();
+    }
+    input.addEventListener(eventType, eventHandler);
+
+    var capturedClose = observable.close;
+    observable.close = function() {
+      if (!capturedClose)
         return;
+      input.removeEventListener(eventType, eventHandler);
 
-      this.node.removeEventListener(this.eventType,
-                                    this.boundNodeValueChanged,
-                                    true);
-      NodeBinding.prototype.close.call(this);
+      observable.close = capturedClose;
+      observable.close();
+      capturedClose = undefined;
     }
-  });
+  }
+
+  function booleanSanitize(value) {
+    return Boolean(value);
+  }
 
   // |element| is assumed to be an HTMLInputElement with |type| == 'radio'.
   // Returns an array containing all radio buttons other than |element| that
@@ -274,124 +253,123 @@
     }
   }
 
-  function CheckedBinding(element, model, path) {
-    InputBinding.call(this, element, 'checked', model, path);
-  }
-
-  CheckedBinding.prototype = createObject({
-    __proto__: InputBinding.prototype,
-
-    sanitizeBoundValue: function(value) {
-      return Boolean(value);
-    },
-
-    postUpdateBinding: function() {
-      // Only the radio button that is getting checked gets an event. We
-      // therefore find all the associated radio buttons and update their
-      // CheckedBinding manually.
-      if (this.node.tagName === 'INPUT' &&
-          this.node.type === 'radio') {
-        getAssociatedRadioButtons(this.node).forEach(function(radio) {
-          var checkedBinding = radio.bindings.checked;
-          if (checkedBinding) {
-            // Set the value directly to avoid an infinite call stack.
-            checkedBinding.value = false;
-          }
-        });
-      }
+  function checkedPostEvent(input) {
+    // Only the radio button that is getting checked gets an event. We
+    // therefore find all the associated radio buttons and update their
+    // check binding manually.
+    if (input.tagName === 'INPUT' &&
+        input.type === 'radio') {
+      getAssociatedRadioButtons(input).forEach(function(radio) {
+        var checkedBinding = radio.bindings.checked;
+        if (checkedBinding) {
+          // Set the value directly to avoid an infinite call stack.
+          checkedBinding.setValue(false);
+        }
+      });
     }
-  });
+  }
 
-  HTMLInputElement.prototype.bind = function(name, model, path) {
+  HTMLInputElement.prototype.bind = function(name, observable) {
     if (name !== 'value' && name !== 'checked')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
+      return HTMLElement.prototype.bind.call(this, name, observable);
 
-    this.unbind(name);
+    unbind(this, name);
     this.removeAttribute(name);
-    return this.bindings[name] = name === 'value' ?
-        new InputBinding(this, 'value', model, path) :
-        new CheckedBinding(this, model, path);
+
+    var sanitizeFn = name == 'checked' ? booleanSanitize : sanitizeValue;
+    var postEventFn = name == 'checked' ? checkedPostEvent : noop;
+    bindInputEvent(this, name, observable, postEventFn);
+    updateInput(this, name,
+                observable.open(inputBinding(this, name, sanitizeFn)),
+                sanitizeFn);
+
+    return this.bindings[name] = observable;
   }
 
-  HTMLTextAreaElement.prototype.bind = function(name, model, path) {
+  HTMLTextAreaElement.prototype.bind = function(name, observable) {
     if (name !== 'value')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
+      return HTMLElement.prototype.bind.call(this, name, observable);
 
-    this.unbind(name);
-    this.removeAttribute(name);
-    return this.bindings[name] = new InputBinding(this, name, model, path);
-  }
+    unbind(this, 'value');
+    this.removeAttribute('value');
+
+    bindInputEvent(this, 'value', observable);
+    updateInput(this, 'value',
+                observable.open(inputBinding(this, 'value', sanitizeValue)));
 
-  function OptionValueBinding(element, model, path) {
-    InputBinding.call(this, element, 'value', model, path);
+    return this.bindings.value = observable;
   }
 
-  OptionValueBinding.prototype = createObject({
-    __proto__: InputBinding.prototype,
-
-    valueChanged: function(value) {
-      var select = this.node.parentNode instanceof HTMLSelectElement ?
-          this.node.parentNode : undefined;
-      var selectBinding;
-      var oldValue;
-      if (select &&
-          select.bindings &&
-          select.bindings.value instanceof SelectBinding) {
-        selectBinding = select.bindings.value;
-        oldValue = select.value;
-      }
+  function updateOption(option, value) {
+    var parentNode = option.parentNode;;
+    var select;
+    if (parentNode instanceof HTMLSelectElement &&
+        parentNode.bindings &&
+        parentNode.bindings.value) {
+      select = parentNode;
+      var selectBinding = select.bindings.value;
+      var oldValue = select.value;
+    }
 
-      InputBinding.prototype.valueChanged.call(this, value);
-      if (selectBinding && !selectBinding.closed && select.value !== oldValue)
-        selectBinding.nodeValueChanged();
+    option.value = sanitizeValue(value);;
+
+    if (select && select.value != oldValue) {
+      selectBinding.setValue(select.value);
+      selectBinding.reset();
+      Platform.performMicrotaskCheckpoint();
+    }
+  }
+
+  function optionBinding(option) {
+    return function(value) {
+      updateOption(option, value);
     }
-  });
+  }
 
-  HTMLOptionElement.prototype.bind = function(name, model, path) {
+  HTMLOptionElement.prototype.bind = function(name, observable) {
     if (name !== 'value')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
+      return HTMLElement.prototype.bind.call(this, name, observable);
 
-    this.unbind(name);
-    this.removeAttribute(name);
-    return this.bindings[name] = new OptionValueBinding(this, model, path);
-  }
+    unbind(this, 'value');
+    this.removeAttribute('value');
 
-  function SelectBinding(element, property, model, path) {
-    InputBinding.call(this, element, property, model, path);
+    bindInputEvent(this, 'value', observable);
+    updateOption(this, observable.open(optionBinding(this)));
+    return this.bindings.value = observable;
   }
 
-  SelectBinding.prototype = createObject({
-    __proto__: InputBinding.prototype,
+  function updateSelect(select, property, value, retries) {
+    select[property] = value;
+    if (!retries || select[property] == value)
+      return
 
-    valueChanged: function(value) {
-      this.node[this.property] = value;
-      if (this.node[this.property] == value)
-        return;
+    // The binding may wish to bind to an <option> which has not yet been
+    // produced by a child <template>. Delay |retries| times.
+    ensureScheduled(function() {
+      updateSelect(select, property, value, retries - 1);
+    });
+  }
 
-      // The binding may wish to bind to an <option> which has not yet been
-      // produced by a child <template>. Delay a maximum of two times: once for
-      // each of <optgroup> and <option>
-      var maxRetries = 2;
-      var self = this;
-      function delaySetSelectedIndex() {
-        self.node[self.property] = value;
-        if (self.node[self.property] != value && maxRetries--)
-          ensureScheduled(delaySetSelectedIndex);
-      }
-      ensureScheduled(delaySetSelectedIndex);
+  function selectBinding(select, property) {
+    return function(value) {
+      updateSelect(select, property, value);
     }
-  });
+  }
 
-  HTMLSelectElement.prototype.bind = function(name, model, path) {
+  HTMLSelectElement.prototype.bind = function(name, observable) {
     if (name === 'selectedindex')
       name = 'selectedIndex';
 
     if (name !== 'selectedIndex' && name !== 'value')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
+      return HTMLElement.prototype.bind.call(this, name, observable);
+
 
-    this.unbind(name);
+    unbind(this, name);
     this.removeAttribute(name);
-    return this.bindings[name] = new SelectBinding(this, name, model, path);
+
+    bindInputEvent(this, name, observable);
+    updateSelect(this, name, observable.open(selectBinding(this, name)), 2);
+    return this.bindings[name] = observable;
   }
 
   // TODO(rafaelw): We should polyfill a Microtask Promise and define it if it isn't.
@@ -408,7 +386,8 @@
       this.scheduled = [];
       this.scheduledIds = [];
       this.running = false;
-      this.observer = new PathObserver(this, 'value', this.run, this);
+      this.observer = new PathObserver(this, 'value');
+      this.observer.open(this.run, this);
     }
 
     Runner.prototype = {
diff --git a/tests/tests.js b/tests/tests.js
index 98645c5..209714c 100644
--- a/tests/tests.js
+++ b/tests/tests.js
@@ -50,7 +50,7 @@ suite('Text bindings', function() {
   test('Basic', function() {
     var text = document.createTextNode('hi');
     var model = {a: 1};
-    text.bind('textContent', model, 'a');
+    text.bind('textContent', new PathObserver(model, 'a'));
     assert.strictEqual('1', text.data);
 
     model.a = 2;
@@ -66,16 +66,16 @@ suite('Text bindings', function() {
   });
 
   test('No Path', function() {
-    var text = document.createTextNode('hi');
+    var text = testDiv.appendChild(document.createTextNode('hi'));
     var model = 1;
-    text.bind('textContent', model);
+    text.bind('textContent', new PathObserver(model));
     assert.strictEqual('1', text.data);
   });
 
   test('Path unreachable', function() {
     var text = testDiv.appendChild(document.createTextNode('hi'));
     var model = {};
-    text.bind('textContent', model, 'a');
+    text.bind('textContent', new PathObserver(model, 'a'));
     assert.strictEqual(text.data, '');
   });
 
@@ -83,8 +83,7 @@ suite('Text bindings', function() {
     var text = document.createTextNode('');
     var model = {a: { b: { c: 1}}};
     var observer = new PathObserver(model, 'a.b.c');
-
-    text.bind('textContent', observer, 'value');
+    text.bind('textContent', observer);
     assert.strictEqual(3, Observer._allObserversCount);
     assert.strictEqual('1', text.data);
 
@@ -103,7 +102,7 @@ suite('Element attribute bindings', function() {
   test('Basic', function() {
     var el = testDiv.appendChild(document.createElement('div'));
     var model = {a: '1'};
-    el.bind('foo', model, 'a');
+    el.bind('foo', new PathObserver(model, 'a'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('1', el.getAttribute('foo'));
 
@@ -131,7 +130,7 @@ suite('Element attribute bindings', function() {
   test('No path', function() {
     var el = testDiv.appendChild(document.createElement('div'));
     var model = 1;
-    el.bind('foo', model);
+    el.bind('foo', new PathObserver(model));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('1', el.getAttribute('foo'));
   });
@@ -139,7 +138,7 @@ suite('Element attribute bindings', function() {
   test('Path unreachable', function() {
     var el = testDiv.appendChild(document.createElement('div'));
     var model = {};
-    el.bind('foo', model, 'bar');
+    el.bind('foo', new PathObserver(model, 'bar'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('', el.getAttribute('foo'));
   });
@@ -147,7 +146,7 @@ suite('Element attribute bindings', function() {
   test('Dashes', function() {
     var el = testDiv.appendChild(document.createElement('div'));
     var model = {a: '1'};
-    el.bind('foo-bar', model, 'a');
+    el.bind('foo-bar', new PathObserver(model, 'a'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('1', el.getAttribute('foo-bar'));
 
@@ -159,8 +158,8 @@ suite('Element attribute bindings', function() {
   test('Element.id, Element.hidden?', function() {
     var element = testDiv.appendChild(document.createElement('div'));
     var model = {a: 1, b: 2};
-    element.bind('hidden?', model, 'a');
-    element.bind('id', model, 'b');
+    element.bind('hidden?', new PathObserver(model, 'a'));
+    element.bind('id', new PathObserver(model, 'b'));
 
     assert.isTrue(element.hasAttribute('hidden'));
     assert.strictEqual('', element.getAttribute('hidden'));
@@ -181,7 +180,7 @@ suite('Element attribute bindings', function() {
   test('Element.id - path unreachable', function() {
     var element = testDiv.appendChild(document.createElement('div'));
     var model = {};
-    element.bind('id', model, 'a');
+    element.bind('id', new PathObserver(model, 'a'));
     assert.strictEqual(element.id, '');
   });
 });
@@ -194,7 +193,7 @@ suite('Form Element Bindings', function() {
   function inputTextAreaValueTest(type) {
     var el = testDiv.appendChild(document.createElement(type));
     var model = {x: 42};
-    el.bind('value', model, 'x');
+    el.bind('value', new PathObserver(model, 'x'));
     assert.strictEqual('42', el.value);
 
     model.x = 'Hi';
@@ -212,7 +211,7 @@ suite('Form Element Bindings', function() {
     dispatchEvent('input', el);
     assert.strictEqual('changed', model.x);
 
-    el.bind('value', model, 'x');
+    el.bind('value', new PathObserver(model, 'x'));
     model.x = null;
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('', el.value);
@@ -221,14 +220,14 @@ suite('Form Element Bindings', function() {
   function inputTextAreaNoPath(type) {
     var el = testDiv.appendChild(document.createElement(type));
     var model = 42;
-    el.bind('value', model);
+    el.bind('value', new PathObserver(model));
     assert.strictEqual('42', el.value);
   }
 
   function inputTextAreaPathUnreachable(type) {
     var el = testDiv.appendChild(document.createElement(type));
     var model = {};
-    el.bind('value', model, 'a');
+    el.bind('value', new PathObserver(model, 'a'));
     assert.strictEqual('', el.value);
   }
 
@@ -260,7 +259,7 @@ suite('Form Element Bindings', function() {
     var model = {val: 'ping'};
 
     var el = testDiv.appendChild(document.createElement('input'));
-    el.bind('value', model, 'val');
+    el.bind('value', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('ping', el.value);
 
@@ -277,7 +276,7 @@ suite('Form Element Bindings', function() {
       }
     };
 
-    el.bind('value', model, 'a.b.c');
+    el.bind('value', new PathObserver(model, 'a.b.c'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('ping', el.value);
 
@@ -310,7 +309,7 @@ suite('Form Element Bindings', function() {
     testDiv.appendChild(input);
     input.type = 'checkbox';
     var model = {x: true};
-    input.bind('checked', model, 'x');
+    input.bind('checked', new PathObserver(model, 'x'));
     assert.isTrue(input.checked);
 
     model.x = false;
@@ -331,7 +330,7 @@ suite('Form Element Bindings', function() {
     testDiv.appendChild(input);
     input.type = 'checkbox';
     var model = {};
-    input.bind('checked', model, 'x');
+    input.bind('checked', new PathObserver(model, 'x'));
     assert.isFalse(input.checked);
   });
 
@@ -341,7 +340,7 @@ suite('Form Element Bindings', function() {
     var el = testDiv.appendChild(document.createElement('input'));
     testDiv.appendChild(el);
     el.type = 'checkbox';
-    el.bind('checked', model, 'val');
+    el.bind('checked', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(true, el.checked);
 
@@ -374,7 +373,7 @@ suite('Form Element Bindings', function() {
     var el = testDiv.appendChild(document.createElement('input'));
     testDiv.appendChild(el);
     el.type = 'checkbox';
-    el.bind('checked', model, 'val');
+    el.bind('checked', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(true, el.checked);
 
@@ -394,7 +393,7 @@ suite('Form Element Bindings', function() {
     var el = testDiv.appendChild(document.createElement('input'));
     testDiv.appendChild(el);
     el.type = 'checkbox';
-    el.bind('checked', model, 'val');
+    el.bind('checked', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(true, el.checked);
 
@@ -412,7 +411,7 @@ suite('Form Element Bindings', function() {
     var input = testDiv.appendChild(document.createElement('input'));
     input.type = 'radio';
     var model = {x: true};
-    input.bind('checked', model, 'x');
+    input.bind('checked', new PathObserver(model, 'x'));
     assert.isTrue(input.checked);
 
     model.x = false;
@@ -435,7 +434,7 @@ suite('Form Element Bindings', function() {
     var input = testDiv.appendChild(document.createElement('input'));
     input.type = 'radio';
     var model = {};
-    input.bind('checked', model, 'x');
+    input.bind('checked', new PathObserver(model, 'x'));
     assert.isFalse(input.checked);
   });
 
@@ -448,22 +447,22 @@ suite('Form Element Bindings', function() {
     var el1 = container.appendChild(document.createElement('input'));
     el1.type = 'radio';
     el1.name = RADIO_GROUP_NAME;
-    el1.bind('checked', model, 'val1');
+    el1.bind('checked', new PathObserver(model, 'val1'));
 
     var el2 = container.appendChild(document.createElement('input'));
     el2.type = 'radio';
     el2.name = RADIO_GROUP_NAME;
-    el2.bind('checked', model, 'val2');
+    el2.bind('checked', new PathObserver(model, 'val2'));
 
     var el3 = container.appendChild(document.createElement('input'));
     el3.type = 'radio';
     el3.name = RADIO_GROUP_NAME;
-    el3.bind('checked', model, 'val3');
+    el3.bind('checked', new PathObserver(model, 'val3'));
 
     var el4 = container.appendChild(document.createElement('input'));
     el4.type = 'radio';
     el4.name = 'othergroup';
-    el4.bind('checked', model, 'val4');
+    el4.bind('checked', new PathObserver(model, 'val4'));
 
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(true, el1.checked);
@@ -519,22 +518,22 @@ suite('Form Element Bindings', function() {
     var el1 = form1.appendChild(document.createElement('input'));
     el1.type = 'radio';
     el1.name = RADIO_GROUP_NAME;
-    el1.bind('checked', model, 'val1');
+    el1.bind('checked', new PathObserver(model, 'val1'));
 
     var el2 = form1.appendChild(document.createElement('input'));
     el2.type = 'radio';
     el2.name = RADIO_GROUP_NAME;
-    el2.bind('checked', model, 'val2');
+    el2.bind('checked', new PathObserver(model, 'val2'));
 
     var el3 = form2.appendChild(document.createElement('input'));
     el3.type = 'radio';
     el3.name = RADIO_GROUP_NAME;
-    el3.bind('checked', model, 'val3');
+    el3.bind('checked', new PathObserver(model, 'val3'));
 
     var el4 = form2.appendChild(document.createElement('input'));
     el4.type = 'radio';
     el4.name = RADIO_GROUP_NAME;
-    el4.bind('checked', model, 'val4');
+    el4.bind('checked', new PathObserver(model, 'val4'));
 
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(true, el1.checked);
@@ -586,7 +585,7 @@ test('(Radio)Input.checked - multiple forms - ShadowRoot', function() {
       val: 2
     };
 
-    select.bind('selectedIndex', model, 'val');
+    select.bind('selectedIndex', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(2, select.selectedIndex);
 
@@ -607,7 +606,7 @@ test('(Radio)Input.checked - multiple forms - ShadowRoot', function() {
       val: 'foo'
     };
 
-    select.bind('selectedIndex', model, 'val');
+    select.bind('selectedIndex', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(0, select.selectedIndex);
   });
@@ -615,7 +614,7 @@ test('(Radio)Input.checked - multiple forms - ShadowRoot', function() {
   test('Option.value', function() {
     var option = testDiv.appendChild(document.createElement('option'));
     var model = {x: 42};
-    option.bind('value', model, 'x');
+    option.bind('value', new PathObserver(model, 'x'));
     assert.strictEqual('42', option.value);
 
     model.x = 'Hi';
@@ -634,7 +633,7 @@ test('(Radio)Input.checked - multiple forms - ShadowRoot', function() {
 
     var model = {};
 
-    select.bind('selectedIndex', model, 'val');
+    select.bind('selectedIndex', new PathObserver(model, 'val'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual(0, select.selectedIndex);
   });
@@ -653,11 +652,11 @@ test('(Radio)Input.checked - multiple forms - ShadowRoot', function() {
       selected: 'b'
     };
 
-    option0.bind('value', model, 'opt0');
-    option1.bind('value', model, 'opt1');
-    option2.bind('value', model, 'opt2');
+    option0.bind('value', new PathObserver(model, 'opt0'));
+    option1.bind('value', new PathObserver(model, 'opt1'));
+    option2.bind('value', new PathObserver(model, 'opt2'));
 
-    select.bind('value', model, 'selected');
+    select.bind('value', new PathObserver(model, 'selected'));
     Platform.performMicrotaskCheckpoint();
     assert.strictEqual('b', select.value);