将自定义组件动态添加到加载的 DOM (aurelia.js)

Question

是否可以在 DOM 加载后添加自定义组件？

例如点击按钮时

模板

<template>
    <button click.delegate="add_component()"> Press me </button>
</template>

视图模型

@inject(Element)

export class App {

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

  function add_component() {
     var component = document.createElement('<customElement></customElement>');
     this.element.appendChild(component);
  }
}

Answer 1

实际上，有不止一种方法可以做到这一点。根据您的实际需要，如果您需要动态切换视图，则可以使用compose element。

另一种方法是使用 Aurelia 的 View Compiler 将标记编译成一个视图，然后创建一个 View Slot（在 aurelia-templating GitHub issue 中有一些关于该主题的讨论）。使用 View Slots，应该可以一个接一个地动态添加多个视图。

但是，如果您的实际需求与您的示例相近，您可以简单地使用以下方法：

<template>
    <button click.delegate="add_component()"> Press me </button>
    <custom-element if.bind="hasCustomElement"></custom-element>
</template>

在视图中：

export class App {
  @observable hasCustomElement = false;

  function add_component() {
      this.hasCustomElement = true;
  }
}

在视图模型中。只有当if.bind 条件变为true 时，自定义元素才会附加到dom 中，如果变为false，则将其删除。