SystemJs 异步加载 ES6 模块时如何处理 Kendo MVC 事件绑定

Question

由于 SystemJs 异步加载模块，因此您无法将事件直接绑定到 html 文件中。即使在 System.import 之后声明控件，此时所有函数都未定义。

例如，以下内容不起作用：

<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>

在此示例中，onClick 始终未定义。

这对于 html5 方法来说并不是真正的问题，因为我可以将按钮初始化到模块中。然而，使用 MVC 包装器，这是在这里初始化按钮的常用方法。

有没有一种方法可以将 Kendo MVC 包装器与 SystemJs 模块结合起来使用而没有缺点？

Answer 1

我没有真正找到绝对没有缺点的解决方案。

但是，这个解决方案对我有用：

在您的模块中创建方法 bindEvents。

myModule.ts

export class MyModule {

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

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

为您的模块创建工厂。

myModuleFactory.ts:

import { MyModule} from "./myModule";

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

将工厂导入视图。从工厂调用 Create 方法并获取 MyModule 作为 Return 值。然后从 MyModule 调用 bindEvents。

view.cshtml:

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

此处的缺点是，您需要知道 kendo 事件的名称。

SystemJs 异步加载 ES6 模块时如何处理 Kendo MVC 事件绑定

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

kendo-asp.net-mvc

systemjs

es6-module-loader