使用 aurelia 模板引擎增强动态添加 html

Question

我正在尝试以动态/编程方式将代码插入 DOM 并让 aurelia 像任何其他模块一样处理插入的代码。

棘手的部分是插入的 html 有一个<compose view-model='A'></compose>元素，它本身应该加载一个模块“A”。

我有一个gistRun 这里

应用程序.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

问题是您正在尝试直接增强元素。 您需要增强包含要增强的节点的父元素。 模板引擎在执行增强逻辑时会寻找 parentNode。

请参阅此更新的 Gist.run 示例以了解它的工作原理。