Support binding to events

R=arv
BUG=

Review URL: https://codereview.appspot.com/45020044

src/NodeBind.js

@@ -133,7 +133,46 @@
     };
   }
 
+  function isEventHandler(name) {
+    return name[0] === 'o' &&
+           name[1] === 'n' &&
+           name[2] === '-';
+  }
+
+  function eventBinding(el, name, value, oneTime) {
+    var eventType = name.substring(3);
+    if (oneTime) {
+      el.addEventListener(eventType, value);
+      return;
+    }
+
+    var observable = value;
+    unbind(el, name);
+    function eventHandler() {
+      var fn = observable.discardChanges();
+      fn.apply(this, arguments);
+    }
+
+    el.addEventListener(eventType, eventHandler);
+
+    var capturedClose = observable.close;
+    observable.close = function() {
+      if (!capturedClose)
+        return;
+      el.removeEventListener(eventType, eventHandler);
+
+      observable.close = capturedClose;
+      observable.close();
+      capturedClose = undefined;
+    }
+
+    return el.bindings[name] = observable;
+  }
+
   Element.prototype.bind = function(name, value, oneTime) {
+    if (isEventHandler(name))
+      return eventBinding(this, name, value, oneTime);
+
     var conditional = name[name.length - 1] == '?';
     if (conditional) {
       this.removeAttribute(name);

tests/tests.js

@@ -198,6 +198,66 @@ suite('Element attribute bindings', function() {
   });
 });
 
+suite('Element event bindings', function() {
+  test('Basic', function() {
+    var element = testDiv.appendChild(document.createElement('div'));
+    var fooCount = 0;
+    var barCount = 0;
+    var model = {
+      fooHandler: function() {
+        fooCount++;
+      }
+    };
+
+    var binding = element.bind('on-foo', new PathObserver(model, 'fooHandler'));
+    Platform.performMicrotaskCheckpoint();
+    dispatchEvent('foo', element);
+    assert.strictEqual(fooCount, 1);
+    assert.strictEqual(barCount, 0);
+
+    model.fooHandler = function() {
+      barCount++;
+    }
+
+    Platform.performMicrotaskCheckpoint();
+    dispatchEvent('foo', element);
+    assert.strictEqual(fooCount, 1);
+    assert.strictEqual(barCount, 1);
+
+    binding.close();
+    dispatchEvent('foo', element);
+    assert.strictEqual(fooCount, 1);
+    assert.strictEqual(barCount, 1);
+
+  });
+
+  test('Basic - oneTime', function() {
+    var element = testDiv.appendChild(document.createElement('div'));
+    var fooCount = 0;
+    var barCount = 0;
+    var model = {
+      fooHandler: function() {
+        fooCount++;
+      }
+    };
+
+    var binding = element.bind('on-foo', model.fooHandler, true);
+    Platform.performMicrotaskCheckpoint();
+    dispatchEvent('foo', element);
+    assert.strictEqual(fooCount, 1);
+    assert.strictEqual(barCount, 0);
+
+    model.fooHandler = function() {
+      barCount++;
+    }
+
+    Platform.performMicrotaskCheckpoint();
+    dispatchEvent('foo', element);
+    assert.strictEqual(fooCount, 2);
+    assert.strictEqual(barCount, 0);
+  });
+});
+
 suite('Form Element Bindings', function() {
 
   setup(doSetup);