In che modo Aurelia può visualizzare la mia vista dopo aver aggiunto in modo dinamico un elemento personalizzato al DOM?

Question

Quando si crea un elemento personalizzato nel DOM e si aggiunge un rispettivo modello di vista che implementa bindable dal framework di aurelia, la mia vista risulta perfettamente.

elemento personalizzato in DOM come così:

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

di Aurelia magici risultati di rendering in vari elementi dei bambini associati con l'elemento personalizzato nel DOM, durante l'ispezione dal browser.

Il problema si pone quando sto cercando di aggiungere dinamicamente elementi personalizzati supplementari al DOM utilizzando jQuery in questo modo ...

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

Invocare questo metodo che utilizza il pulsante (Aurelia 'click.trigger') aggiunge infatti l'elemento personalizzato al DOM, ma senza i vari elementi figlio che consentono di rendere correttamente l'elemento personalizzato nella vista ...

Come aggiungere dinamicamente elementi personalizzati al DOM o aggiungere ad Aurelia superiore rielaborare un elemento personalizzato che ho aggiunto in modo da renderlo visibile?

Grazie in anticipo!

Answer 1

vorrei modificare nel modo seguente:

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

Poi nel modello, utilizzare un repeat.for sulla proprietà answers. Il sistema di rilegatura di Aurelia garantirà l'esistenza di un tag <answer> per ciascun elemento nell'array 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>