title: KendoUI data- attribute event handlers and 'this' scope
body: <p>It seems that kendo's unobtrusive-javascript style event calls break <code>this</code> in my method context.</p>
  
  <p>Say I have an object <code>Foo</code>, instantiated as <code>bar = new Foo()</code></p>
  
  <pre><code>function Foo(){};
  
  Foo.prototype.name = "Herring";
  Foo.prototype.doSomething = function(e) {
     alert(this.name);
  };
  
  bar = new Foo();
  </code></pre>
  
  <p>And attach the event using data-click for example</p>
  
  <pre><code>&lt;a data-role="button" data-click="bar.doSomething"&gt;Click Me&lt;/a&gt;
  </code></pre>
  
  <p>Object context to <code>bar</code> is replaced (not sure why, since we have the convenient <code>element</code> container.) and so <code>this.name</code> is undefined.</p>
  
  <p>I've tried the old <code>var self = this;</code> in the object constructor, but it's not working, does anyone know what the best way to solve this is?</p>
  
  <h2>Update : Hacky Workaround</h2>
  
  <p>Since I really don't want to lose the benefits of wrapping up my modules as classes, I've created event call functions wrappers, which then call the methods on the appropriate object.</p>
  
  <p>For example, connect the markup to a wrapper-function.</p>
  
  <pre><code>&lt;a data-role="button" data-click="doSomething"&gt;Click Me&lt;/a&gt;
  </code></pre>
  
  <p>and the wrapper function just calls the object.method.</p>
  
  <pre><code>function doSomething(e){ bar.doSomething(e) };  
  </code></pre>
  
  <p>Now, this achieves the intended result, but it's quite horrible, <strong>each and every event called from markup must have a proxy function</strong> like the one above. So just imagine a scenario where you have 300 events... and you'll instantly see why this is horrible.</p>
  
  <p>If there's no other solution, and I dearly hope there is. I'll post this workaround as an answer, but as far as I'm concerned, it's far from desirable.</p>
  
  <h1>Footnote</h1>
  
  <p>I'll be completely honest this seems like major architectural flaw in Kendo, since this method of calling events from markup is "the kendo way." Obviously it can't be patched out, because there's probably a fair bit of code already dealing with <code>this</code> as a reference to the html element.</p>
  
  <p>Being able to override it, or being able to route these event calls through a generic handler which can pass the call on, essentially a generic proxy function, are possible ways this could be dealt with. It could also be a simple configurable value on the <code>kendo.</code> object.</p>
  
  <h1>Theoretical Solution</h1>
  
  <p>I'll post follow-up if this works, in theory it's possible to throw events at a generic proxy, and have it call the properly scoped function.</p>
  
  <p>Say we use the event attribute to call the proxy and then create a separate attribute to convey the object/method call. For example.</p>
  
  <pre><code>&lt;a data-role="button" data-click="prox" data-prox="o.eventHandler"&gt;Click Me&lt;/a&gt;
  </code></pre>
  
  <p>The proxy function would pull <code>prox</code> from the attribute dataset:</p>
  
  <h1>method - using eval</h1>
  
  <p>Not because I'm evil, but needs must. </p>
  
  <pre><code>// sitting in global namespace 
  function prox(e){
      var p = e.sender.element.data['prox'];
      // make sure our delegate is a function.
      if("function" == eval("typeof "+p)) { 
          eval(p + "(e)");
      }
  }
  </code></pre>
  
  <p>Obviously I'd like a better way to do this but, at least it's DRY.</p>
  
  <p>(I'll cook a non-eval method in a moment...)</p>
  
  <h1>Begone Eval...</h1>
  
  <p>let's use the window context to locate the object / method.</p>
  
  <pre><code>function prox(e) {
     var p = e.sender.element.data['prox'];
     if(p.indexOf(".") == -1){
        // global function : where *this* is window.
        // check you've got the function if not ditch it.
        if("function" == typeof window[p]) window[p](e);
     } else {
        // object/method (one level deep only.)
        var s = p.split(".");
        var o = s[0], m = s[1];
        // check the object/method is a function before executing it.
        if("function" == typeof window[o][p]) window[o][p](e);
     }
  }
  </code></pre>
  
  <p>Of course for global (window) scoped functions, this as the element is probably more useful, but in that case, you have a choice, I'd leave out the </p>