ESJモジュールがSystemJsによって非同期にロードされた場合の剣道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ラッパーを使用すると、ここでボタンを初期化するのが一般的です。

剣道MVCラッパーをSystemJsモジュールと組み合わせて使用​​する方法はありますか？欠点はありませんか？

Answer 1

私は絶対に欠点のない解決策を見つけられませんでした。

しかし、この解決策は、私の作品：

Ceateあなたのモジュール内のメソッドの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を戻り値として取得します。その後、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> 

欠点ここでは、あなたが剣道イベントの名前を知っておく必要があること、です。