Merge pull request #31 from github/bind-bugs

fix(bind): Fix eventname and controller binding bugs.

Author: koddsson

catalyst/src/bind.ts

@@ -4,23 +4,44 @@
  */
 export function bind(controller: HTMLElement) {
   const tag = controller.tagName.toLowerCase()
-  for (const el of controller.querySelectorAll(`[data-action*=":${tag}#"]`)) {
+  const actionAttributeMatcher = `[data-action*=":${tag}#"]`
+
+  for (const el of controller.querySelectorAll(actionAttributeMatcher)) {
     // Ignore nested elements
     if (el.closest(tag) !== controller) continue
+    bindActionsToController(controller, el)
+  }
+
+  // Also bind the controller to itself
+  if (controller.matches(actionAttributeMatcher)) {
+    bindActionsToController(controller, controller)
+  }
+}
+
+// Bind the data-action attribute of a single element to the controller
+function bindActionsToController(controller: HTMLElement, el: Element) {
+  const tag = controller.tagName.toLowerCase()
+
+  // Match the pattern of `eventName:constructor#method`.
+  for (const binding of (el.getAttribute('data-action') || '').split(' ')) {
+    const [rest, method] = binding.split('#')
+
+    // eventName may contain `:` so account for that
+    // by splitting by the last instance of `:`
+    const colonIndex = rest.lastIndexOf(':')
+    if (colonIndex < 0) continue
+
+    const handler = rest.slice(colonIndex + 1)
+    if (handler !== tag) continue
+
+    const eventName = rest.slice(0, colonIndex)
 
-    // Match the pattern of `eventName:constructor#method`.
-    for (const binding of (el.getAttribute('data-action') || '').split(' ')) {
-      const [rest, method] = binding.split('#')
-      const [eventName, handler] = rest.split(':')
-      if (handler !== tag) continue
-
-      // Check the `method` is present on the prototype
-      const methodDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(controller), method)
-      if (methodDescriptor && typeof methodDescriptor.value == 'function') {
-        el.addEventListener(eventName, (event: Event) => {
-          ;(controller as any)[method](event)
-        })
-      }
+    // Check the `method` is present on the prototype
+    const methodDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(controller), method)
+    if (methodDescriptor && typeof methodDescriptor.value == 'function') {
+      el.addEventListener(eventName, (event: Event) => {
+        ;(controller as any)[method](event)
+      })
     }
   }
 }

catalyst/test/bind.js

@@ -16,6 +16,7 @@ describe('bind', () => {
     }
     querySelectorAll() {}
     foo() {}
+    matches() {}
   }
 
   it('queries for Elements matching data-action*="tagname"', () => {
@@ -42,6 +43,40 @@ describe('bind', () => {
     expect(instance.foo).to.have.been.called(1)
   })
 
+  it('allows for the presence of `:` in an event name', () => {
+    const instance = new MyController()
+    spy.on(instance, 'foo')
+    const el = new FakeElement()
+    instance.querySelectorAll = () => [el]
+    el.closest = () => instance
+    el.getAttribute = () => 'custom:event:my-controller#foo'
+    spy.on(el, 'addEventListener')
+    bind(instance)
+    expect(el.addEventListener).to.have.been.called.once.with('custom:event')
+    const {calls} = el.addEventListener.__spy
+    const fn = calls[0][1]
+    expect(instance.foo).to.have.not.been.called()
+    fn()
+    expect(instance.foo).to.have.been.called(1)
+  })
+
+  it('binds events on the controller to itself', () => {
+    const instance = new MyController()
+    spy.on(instance, 'foo')
+    instance.matches = () => true
+    instance.getAttribute = () => 'click:my-controller#foo'
+    instance.addEventListener = () => true
+    instance.querySelectorAll = () => []
+    spy.on(instance, 'addEventListener')
+    bind(instance)
+    expect(instance.addEventListener).to.have.been.called.once.with('click')
+    const {calls} = instance.addEventListener.__spy
+    const fn = calls[0][1]
+    expect(instance.foo).to.have.not.been.called()
+    fn()
+    expect(instance.foo).to.have.been.called(1)
+  })
+
   it('does not bind elements whose closest selector is not this controller', () => {
     const instance = new MyController()
     spy.on(instance, 'foo')