使用aurelia模板引擎增強動態添加html

Question

我試圖動態/編程插入代碼到DOM中，並有aurelia像處理其他模塊一樣處理插入的代碼。

棘手的部分是插入的html有一個<compose view-model='A'></compose>元素本身應該加載模塊「A」。

我有一個gistRun here

app.js

loadmod(container, viewmodel){ 
 
     debugger; 
 
     var childID = container + "child"; 
 
     var content = `<compose view-model='${viewmodel}' id='${childID}'></compose>`; 
 
     $("#" + container).append("<div>" + content + "</div>"); 
 
     
 
     let el = $("#" + childID)[0]; 
 
     let view = this.templatingEngine.enhance({ element: el, bindingContext: {}, overrideContext: {}}); 
 
     view.bind(); 
 
     view.attached(); 
 
    } 
 
    loadm1(e){ 
 
     this.loadmod("m1holder", "m1"); 
 
    } 
 
    loadm2(e){ 
 
     this.loadmod("m2holder", "m2"); 
 

 
    } 
 
    loadm2again(e){ 
 
     this.loadmod("m2holderagain", "m2"); 
 
     
 
    }

<template> 
 
    <div>Stuff here</div> 
 
    <button click.delegate="loadm1($event)">Load M1</button> 
 
     <button click.delegate="loadm2($event)">Load M2</button> 
 
     <button click.delegate="loadm2again($event)">Load Another M2</button> 
 
    <div id="m1holder"></div> 
 
    <div id="m2holder"></div> 
 
    <div id="m2holderagain"></div> 
 
</template>

Answer 1

的問題是要嘗試直接提升的元素。您需要增強包含要增強的節點的父元素。模板引擎在執行增強邏輯時查找父節點。

請參閱this updated Gist.run example它應該如何工作。