개선 된 프래그먼트를 제거하는 방법

Question

저는 기존 SPA에서 Aurelia 구성 요소를 단계별로 교체하는 작업을하고 있습니다. TemplatingEngine의 enhance API를 사용합니다. 잘 작동하지만 응용 프로그램의 다른 부분 (페이지 새로 고침 없음)으로 이동할 때 이러한 향상된 단편을 제거해야합니다 (이벤트 리스너 제거 ...).

제 아이디어는 페이지에 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(); 
    } 
} 

I 모습 향상되는 HTML : I가 맞춤 요소 자체의 기능이 시도

<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(); 

컨테이너에서보기를 가져 오는 중에 오류가 발생합니다 (정의되지 않은 'resources'속성을 읽을 수 없습니다.). 클릭 핸들러에서이 함수를 호출했습니다.

홈페이지 질문 : 수동으로 DfElement및 그 아이의 unbind 및 detached 훅을 유발하는?

보너스 : 내 aurelia 인스턴스의 인스턴스 (window.DFAurelia) root 및 host은 정의되지 않았습니다. 나쁜 것입니까? 이 페이지의 조각을 향상시키는 (그리고 강화하지 않는) 방법에 잠재적 인 문제점이 있습니까?

Answer 1

enhance() 메서드에서 반환 된 View을 사용하십시오.

enhance() 메서드는 향상된 View 개체를 반환합니다. enhance()라고하는 동일한 위치에서 해체를 관리하는 것이 좋으며, 요소가 스스로 찢어지는 것을 기억하지 못할 수도 있습니다. 그러나 View 인스턴스를 확장 컨테이너에 등록하면 사용자 정의 요소 내에서 액세스 할 수 있습니다.

function proceed() { 
    let aurelia = window.DFAurelia; 
    let container = aurelia.container; 
    let engine = container.get(TemplatingEngine); 
    let view = engine.enhance({ 
     container: container, 
     element: targetElement, 
     resources: aurelia.resources 
    }); 
    container.registerInstance(View, view); 
} 

이

이 View와 View에 대한 호출에 응답 할 DI 컨테이너를 말할 것이다.

import { inject, Aurelia, View } from 'aurelia-framework'; 

@inject(Aurelia, Element) 
export class DFCustomElement { 

    // element is passed to the constructor 
    constructor(aurelia, element) { 
    this.container = aurelia.container;  
    this.element = element; 
    } 

    // but View is only available after attached 
    attached() { 
    this.view = this.container.get(View); 
    } 

    removeMyself() { 
    this.element.remove(); 
    this.view.detached(); 
    this.view.unbind(); 
    } 
} 

사용자 정의 요소에 created(view) 라이프 사이클 방법을 사용하는 것 created(view) 수명주기 방법을

훨씬 더 연습 사용.

import { inject } from 'aurelia-framework'; 

@inject(Element) 
export class DFCustomElement { 

    constructor(element) { 
    this.element = element; 
    } 

    created(view) { 
    this.view = view; 
    } 

    removeMyself() { 
    this.element.remove(); 
    this.view.detached(); 
    this.view.unbind(); 
    } 
} 

이 사용자 정의 요소가 View 자신을 잡아 갖는 훨씬 더 간단, 모범 사례의 방법입니다. 그러나이 대답을 작성할 때 <compose> 요소에 사용자 정의 요소를 중첩하는 방법을 테스트했습니다. 그 결과 내 맞춤 요소에있는 View은 실제로 내 <compose> 요소에 대해 View이고 removeMyself()은 전체적으로 <compose>을 제거했습니다.