From e1e71107161c4b178e87f51cfae2bf303f98a8b6 Mon Sep 17 00:00:00 2001
From: Elliott Sprehn <esprehn@chromium.org>
Date: Fri, 19 Dec 2014 13:10:16 -0800
Subject: [PATCH] Add declarataive event handlers.

Now inside the <template> of a SkyElement you can use
on-eventName="method" on any element to add event listeners.

For example you can write <sky-button on-click="handleClick">
and then define handleClick(event) on the element class that
contains the button.

In adding this and tests I also realized that property bindings
were not setup on the initial call to bind(), which is now
fixed in this patch (See change to Node.prototype.bind).

R=eseidel@google.com, rafaelw@chromium.org

Review URL: https://codereview.chromium.org/812713005
---
 examples/widgets/index.sky | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/examples/widgets/index.sky b/examples/widgets/index.sky
index 88e63ce206..d102f85baf 100644
--- a/examples/widgets/index.sky
+++ b/examples/widgets/index.sky
@@ -16,8 +16,9 @@
   </style>
 
   <sky-box title='Buttons'>
-    <sky-button id='button'>Button</sky-button>
+    <sky-button id='button' on-click='handleClick'>Button</sky-button>
     <div>highlight: {{ myButton.highlight }}</div>
+    <div>clickCount: {{ clickCount }}</div>
   </sky-box>
 
   <sky-box title='Checkboxes'>
@@ -47,6 +48,10 @@ module.exports = class extends SkyElement {
   attached() {
     this.myButton = this.shadowRoot.getElementById('button');
     this.myCheckbox = this.shadowRoot.getElementById('checkbox');
+    this.clickCount = 0;
+  }
+  handleClick(event) {
+    this.clickCount++;
   }
 }.register();
 </script>