我正在尝试以动态/编程方式将代码插入到DOM中,并让aurelia像任何其他模块一样处理插入的代码。
棘手的部分是插入的html有一个<compose view-model='A'></compose>
元素,它本身应该加载模块“A”。
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>
答案 0 :(得分:1)
问题是您正在尝试直接增强元素。您需要增强包含要增强的节点的父元素。模板引擎在执行增强逻辑时会查找parentNode。
请参阅this updated Gist.run example了解它应如何运作。