html - 使用aurelia模板引擎增强功能来动态添加html

我正在尝试动态/编程地将代码插入到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>

最佳答案

问题是您试图直接增强元素。您需要增强包含要增强的节点的父元素。模板引擎在执行增强逻辑时查找父节点。
请参见this updated Gist.run example了解其工作原理。

关于html - 使用aurelia模板引擎增强功能来动态添加html，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39580754/