aureliaテンプレートエンジンを使用して動的にhtmlを追加する

Question

DOMにコードを動的に/プログラムで挿入し、他のモジュールと同様に挿入されたコードをaureliaで処理しようとしています。

厄介な部分は、挿入されたhtml自体にモジュール "A"をロードする<compose view-model='A'></compose>要素があることです。

私は、問題は、あなたが直接要素を強化しようとしているある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

を持っています。拡張するノードを含む親要素を拡張する必要があります。 Templating Engineは、拡張ロジックを実行するときにparentNodeを探します。

どのように動作するかについては、this updated Gist.run exampleを参照してください。