1

私は、コンポーネントを 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が定義されておらず、それは悪いことですか? ページ内のフラグメントを拡張 (および非拡張) するこの方法に潜在的な問題はありますか?

4

1 に答える 1