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

问题描述：

是否可以在DOM已经加载后向DOM添加自定义组件？动态添加自定义组件到已加载的DOM（aurelia.js）

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

答案要么是或者不是，取决于你想要做什么。按照您所展示的方式进行操作是不可能的，因为Aurelia不会像这样寻找添加到DOM中的东西。但是如果你使用中继器和'compose'元素，你可以做一些类似你想做的事情。您可能需要重新考虑您正在做什么来查看是否有更好的方法在MVVM模式的范围内完成它。 –

添加到Ashley的评论中，您可以动态呈现组件在aurelia-dialog中完成的方式或者像aurelia-notify一样的吐司。 –

[在动态添加自定义元素到DOM之后，如何让Aurelia呈现我的视图？]（https://stackoverflow.com/questions/31595103/how-do-get-aurelia-to-render-my -view-后动态添加-A-定制元件-T） – BuildingJarl

答

有这样做，实际上不止一种方法。根据您的实际需要，如果您需要动态切换视图，则可以使用compose element。

另一种方法是使用Aurelia的视图编译器将标记编译到一个视图中，然后创建一个视图插槽（在这个aurelia-templating GitHub issue中有关于该主题的一些讨论）。通过查看插槽，应该可以一个接一个地动态添加多个视图。

但是，如果你的实际需要是什么，靠近你的榜样，你可以简单地摆脱这样的：在视图

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

相关推荐