当ES6模块由SystemJs加载异步时，如何处理Kendo MVC事件绑定-Java 学习之路

由于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模块结合使用而没有任何缺点？

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 Methods并将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事件的名称 .

回复于 2024-04-24T17:18:44+08:00

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

1 回答

相关问题