Использование aurelia templating engine повышает динамическое добавление html

Question

Я пытаюсь динамически/программно вставлять код в DOM и иметь aurelia обрабатывать вставленный код, как и любой другой модуль.

Сложная часть состоит в том, что вставленный html имеет элемент <compose view-model='A'></compose>, который сам должен загрузить модуль «A».

У меня есть gistRun here

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>

Answer 1

Этот вопрос вы пытаетесь усилить элемент непосредственно. Вам нужно усилить родительский элемент, который содержит узлы, которые нужно улучшить. Модуль Templating Engine ищет родительскийNode, когда он выполняет логику расширения.

См. this updated Gist.run example, как он должен работать.