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

Question

在 DOM 中创建自定义元素并添加实现可从 aurelia 框架绑定的相应视图模型时，我的视图呈现完美。

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>');
}

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

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

提前致谢！

Answer 1

我会修改如下：

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

然后在您的模板中，在 answers 属性上使用 repeat.for。 Aurelia 的绑定系统将确保 answers 数组中的每个元素都有一个 <answer> 标记。

<!-- 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>

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

How do get Aurelia to render my view after dynamically adding a custom element to the DOM?

javascript

dom

aurelia