私は、コンポーネントを Aurelia コンポーネントに段階的に置き換える既存の SPA に取り組んでいます。enhance
のAPIを使用しますTemplatingEngine
。これはかなりうまく機能しますが、アプリケーションの別の部分に移動するとき (ページのリロードなし) には、これらの強化されたフラグメントを破棄する (イベント リスナーを削除するなど) 必要もあります。
私の考えは、 aurelia インスタンスをページに保持して再利用することです。
現在、次のようなフラグメントを強化しています。
function enhanceFragment(targetElement) {
function proceed() {
let aurelia = window.DFAurelia;
let engine = aurelia.container.get(TemplatingEngine);
engine.enhance({
container: aurelia.container,
element: targetElement,
resources: aurelia.resources
});
}
if (!window.DFAurelia) {
bootstrap(async aurelia => {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.eventAggregator()
.developmentLogging()
.globalResources('app/df-element');
await aurelia.start();
window.DFAurelia = aurelia;
proceed();
});
} else {
proceed();
}
}
私が強化した HTML は次のようになります。
<df-element></df-element>
カスタム要素自体の関数でこれを試しました(DfElement::removeMyself()
):
let vs: ViewSlot = this.container.get(ViewSlot);
let view: View = this.container.get(View);
vs.remove(view);
vs.detached();
vs.unbind();
しかし、コンテナーからビューを取得するときにエラーが発生します ( Undefined のプロパティ 'resources' を読み取ることができません)。クリック ハンドラからこの関数を呼び出しました。
主な質問:とunbind
その子のフックとdetached
フックを手動でトリガーする方法は?DfElement
おまけの質問:aurelia
インスタンス ( window.DFAurelia
)root
のプロパティhost
が定義されておらず、それは悪いことですか? ページ内のフラグメントを拡張 (および非拡張) するこの方法に潜在的な問題はありますか?