Jak zmusić Aurelia do renderowania widoku po dynamicznym dodawaniu niestandardowego elementu do DOM?

Question

Podczas tworzenia niestandardowego elementu w DOM i dodawania odpowiedniego modelu widoku, który implementuje bindable z frameworka aurelia, mój widok jest renderowany idealnie.

niestandardowy element DOM jak tak:

<!-- 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> 

magiczne wyniki renderowania Aurelia w różnych dzieci elementów związanych z niestandardowym elementem w DOM, podczas inspekcji w przeglądarce.

Problem pojawia się, gdy ja próbuje dynamicznie dodać dodatkowe elementy niestandardowe do DOM przy użyciu jQuery jak tak ...

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

Wywołanie tej metody za pomocą przycisku (Aurelia „click.trigger”) rzeczywiście dodaje element niestandardowy do DOM, ale bez różne elementy, które pozwala dzieci element niestandardowy być odpowiednio wykonane w widoku ...

Jak prawidłowo dynamicznie dodawać własne elementy do DOM lub mówi Aurelia Top rocess niestandardowy element, który dodałem, więc renderuje w moim widoku?

Z góry dziękuję!

Answer 1

chciałbym zmodyfikować następująco:

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

Następnie w szablonie, użyj repeat.for na posesji answers. System wiążący Aurelia zapewni, że istnieje znacznik <answer> dla każdego elementu w tablicy answers.