Merge pull request #164 from github/bind-handleevent-default

Method can be ommited from bind defaulting to handleEvent

Author: keithamus

docs/_guide/actions.md

@@ -67,7 +67,18 @@ The actions syntax follows a pattern of `event:controller#method`.
 
  - `event` must be the name of a [_DOM Event_](https://developer.mozilla.org/en-US/docs/Web/Events), e.g. `click`.
  - `controller` must be the name of a controller ascendant to the element.
- - `method` must be a _public_ _method_ attached to a controller's prototype. Static methods will not work.
+ - `method` (optional) must be a _public_ _method_ attached to a controller's prototype. Static methods will not work.
+
+If method is not supplied, it will default to `handleEvent`.
+
+Some examples of Actions Syntax:
+
+- `click:my-element#foo` -> `click` events will call `foo` on `my-element` elements.
+- `submit:my-element#foo` -> `submit` events will call `foo` on `my-element` elements.
+- `click:user-list` -> `click` events will call `handleEvent` on `user-list` elements.
+- `click:user-list#` -> `click` events will call `handleEvent` on `user-list` elements.
+- `click:top-header-user-profile#` -> `click` events will call `handleEvent` on `top-header-user-profile` elements.
+- `nav:keydown:user-list` -> `navigation:keydown` events will call `handleEvent` on `user-list` elements.
 
 ### Multiple Actions
 

src/bind.ts

@@ -95,12 +95,12 @@ type Binding = {type: string; tag: string; method: string}
 function* bindings(el: Element): Iterable<Binding> {
   for (const action of (el.getAttribute('data-action') || '').trim().split(/\s+/)) {
     const eventSep = action.lastIndexOf(':')
-    const methodSep = action.lastIndexOf('#')
+    const methodSep = Math.max(0, action.lastIndexOf('#')) || action.length
     yield {
       type: action.slice(0, eventSep),
       tag: action.slice(eventSep + 1, methodSep),
-      method: action.slice(methodSep + 1)
-    }
+      method: action.slice(methodSep + 1) || 'handleEvent'
+    } || 'handleEvent'
   }
 }
 

test/bind.js

@@ -100,6 +100,23 @@ describe('bind', () => {
     expect(calls).to.have.nested.property('[1][0].type', 'submit')
   })
 
+  it('binds to `handleEvent` is function name is omitted', () => {
+    const instance = document.createElement('bind-test-element')
+    chai.spy.on(instance, 'handleEvent')
+    const el = document.createElement('div')
+    el.setAttribute('data-action', 'click:bind-test-element submit:bind-test-element')
+    instance.appendChild(el)
+    bind(instance)
+    expect(instance.handleEvent).to.have.not.been.called()
+    el.dispatchEvent(new CustomEvent('click'))
+    expect(instance.handleEvent).to.have.been.called.exactly(1)
+    el.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.handleEvent).to.have.been.called.exactly(2)
+    const calls = instance.handleEvent.__spy.calls
+    expect(calls).to.have.nested.property('[0][0].type', 'click')
+    expect(calls).to.have.nested.property('[1][0].type', 'submit')
+  })
+
   it('can bind multiple actions separated by line feed', () => {
     const instance = document.createElement('bind-test-element')
     chai.spy.on(instance, 'foo')