動態添加自定義組件到已加載的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); 
    } 
}

來源

2017-07-03 BuildingJarl

答案要麼是或者不是，取決於你想要做什麼。按照您所展示的方式進行操作是不可能的，因爲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時將其移除。

來源

2017-07-05 11:11:55 Rytmis

動態添加自定義組件到已加載的DOM（aurelia.js）

回答

相關問題