如何拆除增强的片段

Question

我正在开发一个现有的SPA，我们逐步用Aurelia组件替换组件。我们使用enhance的{​​{1}} API。这非常有效但我们还需要在移动到应用程序的另一部分时（无页面重新加载）拆除那些增强的片段（删除事件监听器......）。

我的想法是将aurelia实例保留在页面中并重复使用。

目前我增强了这样的片段：

TemplatingEngine

我增强的HTML看起来像：

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

我在自定义元素本身（<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(); 及其子女的unbind和detached个钩子？

奖励问题：我的DfElement实例（aurelia）window.DFAurelia和root的属性未定义：这是件坏事吗？您是否看到在页面中增强（和取消增强）片段的这种方式存在任何潜在问题？

Answer 1

使用View方法返回的enhance()。

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

这将告诉DI容器使用此View来回复View的来电。

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实际上是View元素的<compose>，removeMyself()完全删除了<compose>。