当在 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>');
}
使用按钮调用此方法(奥里莉亚的“点击.触发”)确实将自定义元素添加到 DOM,但是without允许自定义元素在视图中正确呈现的各种子元素...
如何正确地将自定义元素动态添加到 DOM 或告诉 Aurelia 处理我添加的自定义元素以便它在我的视图中呈现?
提前致谢!
我将修改如下:
//chatbox.js
export class Chatbox {
answers = [{
name:'Reah Miyara',
nickname:'RM'
}];
addCustomElement() {
answers.push({
name:'Joe Smith',
nickname: 'JS'
}];
}
}
然后在您的模板中使用repeat.for
on the answers
财产。 Aurelia 的绑定系统将确保<answer>
中每个元素的标签answers
array.
<!-- 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)