Javascript 如何让Aurelia在向DOM动态添加自定义元素后呈现我的视图？

在DOM中创建自定义元素并添加相应的视图模型（实现了aurelia框架中的bindable）时，我的视图呈现得非常完美

DOM中的自定义元素，因此：

<!-- chatbox.html -->
<template>
...    
    <ul class="chat">
        <answer name="Reah Miyara" nickname="RM" text="Hello World"></answer>
    </ul>
...
    <button class="btn" click.trigger="addCustomElement()">Add</button>
...
</template>

...    


...
添加
...

当从浏览器进行检查时，Aurelia的魔术渲染会产生与DOM中的自定义元素关联的各种子元素

当我试图使用jQuery动态地向DOM添加额外的自定义元素时，问题就出现了，比如

// chatbox.js
addCustomElement() { 
    $('.chat').append('<answer name="Joe Smith" nickname="JS"></answer>');
}

//chatbox.js
addCustomElement（）{
$（'.chat'）。追加（''）；
}

使用按钮（Aurelia的“click.trigger”）调用此方法确实会将自定义元素添加到DOM中，但是不包含允许在视图中正确呈现自定义元素的各种子元素

如何正确地将自定义元素动态添加到DOM中，或者告诉Aurelia处理我添加的自定义元素，以便它在我的视图中呈现

---

提前谢谢

我将修改如下：

//chatbox.js
export class Chatbox {
   answers = [{
      name:'Reah Miyara',
      nickname:'RM'
   }];
   addCustomElement() {
      answers.push({
        name:'Joe Smith',
        nickname: 'JS'
      }];
   }
}

然后在模板中，在

answers

属性上使用

repeat.for

。Aurelia的绑定系统将确保

应答

数组中的每个元素都有一个

标记

<!-- chatbox.html -->
<template>
 ...
<ul class="chat">
  <answer repeat.for="answer of answers" name.bind="answer.name" nickname.bind="answer.nickname"></answer>
</ul>
<button class="btn" click.trigger="addCustomElement()">Add</button>
... 
</template>

...


添加
... 

为什么不使用中继器并将新项目附加到中继器绑定到的数组中？这正是我最终要做的！