Aurelia 如何撕下增强片段

我正在一个现有的水疗中心工作，在那里我们一步一步地用Aurelia组件替换组件。我们使用

模板引擎

的

增强

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

我增强的HTML如下所示：

<df-element></df-element>

但从容器获取视图时出错（无法读取未定义的属性“resources”）。我通过单击处理程序调用了这个函数

主要问题：如何手动触发

DfElement

及其子元素的

解除绑定

和

分离

挂钩

附加问题：我的

aurelia

实例（

window.DFAurelia

）

root

和

host

的属性未定义：这是一件坏事吗？您认为这种增强（和取消增强）页面中片段的方法有任何潜在问题吗？

使用从

enhanced（）

方法返回的

视图。
enhanced（）
方法返回增强的
视图
对象。从调用
enhanced（）
的同一位置管理拆卸是一种很好的做法，因为您可能无法相信某个元素会记得将其自身拆下。但是，您始终可以向增强容器注册
视图
实例，以便从自定义元素中访问它

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

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

这将告诉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）
lifecycle方法

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

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

这是让自定义元素获取自己的
视图
的一种更直接、最佳实践的方法。但是，在尝试为您编写此答案时，我测试了在
元素中嵌套自定义元素。结果是，我的自定义元素中的
视图实际上是我的
元素的
视图，并且
移除我自己（）
完全移除了
 对于这个元素，我不使用
，所以第二个选项对我有效。谢谢将
this.view=null
作为垃圾收集器的
RemoveMy
的最后一行？您好，Matthew，请您详细说明一下“从调用enhance（）的同一位置管理拆卸是一种很好的做法，因为您可能无法相信某个元素会记得将其自身拆下。”据我所知，这不是您在代码示例中介绍的内容？