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

Question

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

Answer 1

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

请参阅这个更新的 Gist.run 示例，了解它应该如何工作。