[英]How do get Aurelia to render my view after dynamically adding a custom element to the DOM?
在DOM中创建自定义元素并添加从aurelia-framework实现可绑定的相应视图模型时,我的视图呈现完美。
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处理我添加的自定义元素,以便在我的视图中呈现?
提前致谢!
我会修改如下:
//chatbox.js
export class Chatbox {
answers = [{
name:'Reah Miyara',
nickname:'RM'
}];
addCustomElement() {
answers.push({
name:'Joe Smith',
nickname: 'JS'
}];
}
}
然后在您的模板中,在answers
属性上使用repeat.for
。 奥里利亚的绑定系统将确保有一个<answer>
对于每一组件标签中answers
阵列。
<!-- 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.