Как получить Aurelia для визуализации моего представления после динамического добавления пользовательского элемента в DOM?

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> 

магических результаты рендеринга Аурелии в различных дочерних элементах, связанных с настраиваемым элементом в DOM, когда проверяющий из браузера.

Проблема возникает, когда я пытаюсь динамически добавлять дополнительные пользовательские элементы в DOM с помощью JQuery, как так ...

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

Вызов этого метода с помощью кнопки (Аурелии «click.trigger») действительно добавляет пользовательский элемент в DOM, но без различных дочерних элементы, которые позволяют пользовательский элемент правильно отображаются в представлении ...

Как правильно динамически добавлять пользовательские элементы в DOM или сказать Aurelia Вверх rocess пользовательский элемент, который я добавил, чтобы он отображался на мой взгляд?

Заранее благодарен!

Answer 1

Я хотел бы изменить следующим образом:

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

Затем в шаблоне, используйте repeat.for на answers собственности. Система связывания Aurelia гарантирует наличие тега <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>