How to deal with Kendo MVC event binding when ES6 Modules loaded asyncronous by SystemJs

Question

As SystemJs loads modules async you can not bind events into the html file directly. Even when you declare the controls after System.import all functions are undefined at this time.

For example the following is not working:

<script type="text/javascript">
  System.import('myModule'); //myModule contains a function called onClick.
</script>

@(Html.Kendo().Button()
  .Name("RazorButton")
  .Content("RazorButton")
  .HtmlAttributes(new { type = "button" })
  .Events(ev => ev.Click("onClick")))

<button id="html5Button">Html5 Button</button>

<script type="text/javascript">
  $("#html5Button").kendoButton({
    click: onClick
  });
</script>

In this example onClick is allways undefined.

This is not really a problem with the html5 way as I can init the button into the module. With the MVC wrapper however it is the common way to init the button in here.

Is there a way to use the Kendo MVC wrapper in combination with SystemJs module laoding with no drawbacks?

Answer 1

I did not really found a solution with absolutly no drawback.

However, this solution works for me:

Ceate a methods bindEvents in your Module.

myModule.ts

export class MyModule {

   bindEvents = () => {
      $("#RazorButton").data("kendoButton").bind("click", this.buttonClick);
   }

   buttonClick = (e) => {
       //do something...
   }
}

Create a factory for your Module.

myModuleFactory.ts:

import { MyModule} from "./myModule";

export function Create(): MyModule{
   return new MyModule();
}

Import the Factory into the View. Call the Create Methods from the factory and get MyModule as Return value. Then call bindEvents from MyModule.

view.cshtml:

<script type="text/javascript">
   System.import('myModuleFactory').then(function (e) {
      var vm = e.Create();
      vm.bindEvents();
  }).catch(console.error.bind(console));
</script>

The drawback in here is, that you need to know the name of the kendo event.