zum Hinzufügen und Entfernen von benutzerdefinierten Elementen im laufenden Betrieb oder durch einen Klick-Ereignis in Aurelia

Question

Fast aufgeben auf Aurelia, ich habe Probleme mit dem Hinzufügen von benutzerdefinierten Elementen dynamisch in Aurelia, sagen wir haben ein benutzerdefiniertes Tag: meine anzeigen -element.html:

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

Viewmodel: my-element.js:

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

so versuche ich diesen Tag manuell hinzufügen, in einer anderen Ansicht:

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

eine andere Ansichtsmodell:

export class App { 

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

sah ich diesen Link https://gist.run/?id=762c00133d5d5be624f9, aber es braucht einen Behälter Referenz
<div ref="container"></div>

Ich möchte nicht, einen Behälter geben, sondern ich möchte es aktuelle anhängen werden Aussicht.

Ich habe auch versucht aurelia-Compiler von https://github.com/gooy/aurelia-compiler verwenden, wenn ich versuche, es zu importieren, es war in der Lage file'gooy/aurelia-Compiler‘, aber ich habe diesen Fehler zu suchen: Fehler Aufruf Compiler. Versuchen Sie etwas zu injizieren/registrieren, das bei DI nicht existiert?

Kann mir bitte jemand helfen? Vielen Dank.

Answer 1

Sie könnten das HTML-Element der Ansicht einfügen und es als "Container" verwenden. Wie folgt aus:

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 
    } 
} 

Verwenden Sie dann this.element im Einsatzmethode:

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

Lauf Beispiel:

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

hoffe, das hilft!

Answer 2

Anstatt zu versuchen, Ansichten manuell durch Ihr viewModel (Controller) zu injizieren, versuchen Sie, neue viewModels zu erstellen, aus denen Ansichten generiert werden können. So, wie folgt aus:

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