我正在尝试以动态/编程方式将代码插入 DOM,并让 aurelia 像任何其他模块一样处理插入的代码。
棘手的部分是插入的 html 有一个<compose view-model='A'></compose>
元素,它本身应该加载一个模块“A”。
我有一个gistRun here
应用程序.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>