Question

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

E.g。单击按钮时

模板

<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则会被删除。

动态地将自定义组件添加到已加载的DOM（aurelia.js）

1 个答案: