将自定义元素动态添加到 DOM 后，如何让 Aurelia 呈现我的视图? [英] How do get Aurelia to render my view after dynamically adding a custom element to the DOM?

问题描述

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

When creating a custom element in the DOM and adding a respective view model which implements bindable from the aurelia-framework, my view renders perfectly.

DOM 中的自定义元素如下:

custom element in DOM as so:

<!-- 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 中的自定义元素相关联的各种子元素.

Aurelia's magic rendering results in various children elements associated with the custom element in the DOM, when inspecting from the browser.

当我尝试像这样使用 jQuery 将其他自定义元素动态添加到 DOM 时，就会出现问题...

The issue arises when I am attempting to dynamically add additional custom elements to the DOM using jQuery like so...

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

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

Invoking this method using the button (Aurelia's 'click.trigger') indeed adds the custom element to the DOM, but without the various children elements which allows the custom element to be properly rendered in the view...

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

How do I properly dynamically add custom elements to the DOM or tell Aurelia to process a custom element which I have added so it renders in my view?

提前致谢！

推荐答案

我会修改如下:

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

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

Then in your template, use a repeat.for on the answers property. Aurelia's binding system will ensure that there is an <answer> tag for each element in the 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>

这篇关于将自定义元素动态添加到 DOM 后，如何让 Aurelia 呈现我的视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！