aureliaのカスタムイベントの追加や削除の方法

Question

Aureliaをあきらめて、私はAureliaのカスタムエレメントを動的に追加することに苦心しています。 カスタムタグがあるとします： view my -element.html：

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

のviewmodel：私の-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>

コンテナ参照を必要としますビュー。

また、私はそれをインポートしようとすると、file'gooy /オーレリア・コンパイラ」を見つけることができましたが、私は、このエラーだ、https://github.com/gooy/aurelia-compilerからオーレリア・コンパイラを使用してみました： エラー呼び出すコンパイラを。あなたはDIに存在しないものを注入/登録しようとしていますか？

誰かが助けてくれますか？ありがとう。

Answer 1

ビューの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を使用します：

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

・ホープ、このことができます：

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

は、例を実行している。このように！

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