feat(bind): events and getters have 'this' bound to the target element

package.json

@@ -50,7 +50,7 @@
   },
   "jest": {
     "preset": "ts-jest",
-    "verbose": true,
+    "verbose": false,
     "testMatch": [
       "**/*.spec.ts"
     ],

src/bind.spec.ts

@@ -28,6 +28,44 @@ describe('bind', () => {
     const el = document.querySelector<HTMLElement>('[bind]');
     await el.click();
 
-    expect(recievedEvent).not.toBeNull();
+    expect(recievedEvent).not.toBeUndefined();
+  });
+
+  it('this is bound to element in getters', async () => {
+    document.documentElement.innerHTML = '<div bind [inner-html]="html"></div>';
+
+    const el = document.querySelector<HTMLElement>('[bind]');
+    let elThis: HTMLElement;
+
+    const context = {
+      get html() {
+        elThis = this;
+        return '<span>inserted</span>';
+      }
+    };
+
+    bind(document, context);
+
+    expect(el.innerHTML).toEqual(context.html);
+    expect(elThis).toBe(el);
+  });
+
+  it('this is bound to element in event handlers', async () => {
+    document.documentElement.innerHTML = '<div bind {click}="onClick"></div>';
+
+    const el = document.querySelector<HTMLElement>('[bind]');
+    let elThis: HTMLElement;
+
+    const context = {
+      onClick: function() {
+        elThis = this;
+      }
+    };
+
+    bind(document, context);
+
+    await el.click();
+
+    expect(elThis).toBe(el);
   });
 });

src/bind.ts

@@ -33,7 +33,7 @@ export function bind(rootElement: Document | Element, context: any): void {
           }
           if (getValue() !== value) setValue(value);
         },
-        get: getValue
+        get: getValue.bind(element)
       });
       component[binding.componentMemberName] =
         context[binding.contextMemberName];
@@ -43,7 +43,7 @@ export function bind(rootElement: Document | Element, context: any): void {
     getBindings(eventsExp, element, attributeNames).forEach(binding => {
       element.addEventListener(
         binding.componentMemberName,
-        context[binding.contextMemberName]
+        context[binding.contextMemberName].bind(element)
       );
     });
   });