如何动态添加和删除自定义元素或通过aurelia中的单击事件

几乎放弃了Aurelia,我正努力在Aurelia添加动态的自定义元素,
假设我们有一个自定义标记:
查看my-element.html:

<template>  My Element ${name} </template>

viewmodel:my-element.js:

export class MyElement {
    @bindable name = '';
}

所以我尝试在另一个视图中手动添加此标记:

<template>
<button type="button" click.delegate="createMyElement()">Remove</button>
</template>

另一个viewmodel:

export class App {

   createMyElement() {
     //how to do it in here to create element 
     //<my-element name='name1'></my-element>
   }
}

我看了这个链接https://gist.run/?id=762c00133d5d5be624f9,但它需要一个容器参考
< div ref =“container”>< / div>

我不想指定容器,而是希望它附加到当前视图.

我也尝试使用https://github.com/gooy/aurelia-compiler的aurelia-compiler,当我尝试导入它时,它能够找到文件’gooy / aurelia-compiler’,但是我收到了这个错误:
调用编译器时出错.您是否尝试注入/注册DI不存在的内容?

有人可以帮忙吗?谢谢.

最佳答案
您可以注入视图的html元素并将其用作“容器”.像这样:

import {inject} from 'aurelia-framework';
import {ViewFactory} from './view-factory';

@inject(Element, ViewFactory)
export class App {
  //...

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

然后,在insert方法中使用this.element:

this.dispose = this.viewFactory.insert(this.element, this.viewHtml, viewModel);

运行示例:

https://gist.run/?id=9d5e7a60cd02e55618829a304df00621

希望这可以帮助!

转载注明原文:如何动态添加和删除自定义元素或通过aurelia中的单击事件 - 代码日志