1

我正在开发一个现有的 SPA，我们逐步用 Aurelia 组件替换组件。我们enhance使用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();

但是从容器获取视图时出现错误（无法读取未定义的属性“资源”）。我从点击处理程序中调用了这个函数。

主要问题：如何手动触发 the及其unbind子项的和detached钩子？DfElement

额外问题：我的aurelia实例 ( window.DFAurelia)root 的属性host未定义：这是一件坏事吗？您是否发现这种增强（和不增强）页面中片段的方式存在任何潜在问题？

4

1 回答 1

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

View这将告诉 DI 容器使用 this响应调用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>。

于 2017-01-16T06:24:42.943 回答