SystemJs异步加载ES6模块时如何处理Kendo MVC事件绑定
SystemJs异步加载ES6模块时如何处理Kendo MVC事件绑定
提问于 2016-08-09 22:22:36
当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
Stack Overflow用户
回答已采纳
发布于 2016-12-12 21:39:24
我真的没有找到一个绝对没有缺点的解决方案。
然而，这个解决方案适用于我：
在你的模块中创建一个方法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();
}将Factory导入到视图中。从工厂调用Create方法并获取MyModule作为返回值。然后从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>这里的缺点是，您需要知道剑道事件的名称。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38853416
复制相关文章
相似问题
腾讯云开发者
