Question

几乎放弃了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编译器，当我尝试导入它时，它能够找到文件'gooy / aurelia-compiler'，但是我收到了这个错误：调用编译器时出错。您是否尝试注入/注册DI不存在的东西？

有人可以帮忙吗？感谢。

Answer 1

您可以注入视图的html元素并将其用作“容器”。像这样：

if (!$errors) {
 //Call Js function without any events
 }

然后，在插入方法中使用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 } }：

this.element

运行示例：

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

希望这有帮助！

Answer 2

尝试创建新的viewModel来生成视图，而不是尝试通过viewModel（控制器）手动注入视图。所以，像这样：

<强> home.html的

<template>
    <my-element repeat.for="name of names" name.bind="name"></my-element>
    <button click.delegate="addName()">Create My Element</button>
</template>

<强> home.js

export class HomeViewModel {

    constructor() {
        this.names = []
    }

    addName() {
        this.names.push('Jim');
    }
}

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

2 个答案: