动态添加自定义元素到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这样动态地向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'
      }];
   }
}

然后在您的模板中，使用 repeat.for $ / code> c code code code code $ c> 数组中的每个元素的标签。

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屋！