How do get Aurelia to render my view after dynamically adding a custom element to the DOM?

Question

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.

custom

Answer 1

I would modify as follows:

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

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>