Aurelia, DOM'a dinamik olarak özel bir öğe ekledikten sonra görünümümü oluşturmaya nasıl başlar?

Question

DOM'da özel bir öğe oluştururken ve aurelia çerçevesinden ayrılabilir olan ilgili bir görünüm modeli eklerken, görünümüm mükemmel bir şekilde işler. böylece DOM'da

özel öğe: tarayıcıdan teftiş DOM'da özel öğe ile ilişkili çeşitli çocuk öğelerinde

<!-- 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'nın sihirli render sonuçları.

Dinamik şöyle jQuery kullanarak DOM ek özel elemanlar eklemek çalışılıyor zaman sorunu da ortaya çıkıyor ...

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

düğmesine (Aurelia'nın 'click.trigger') kullanılarak bu yöntemi çağırma gerçekten içermeyen özel DOM elementi, ama ekler düzgün dinamik Aurelia'yı DOM özel öğeleri ekleyebilir veya anlatmak nasıl özel öğe düzgün görünümde gerçekleştirilmesine olanak tanımaktadır çeşitli çocuk elemanları ...

üst rocess eklediğim özel bir öğe, bu yüzden benim görüşüme göre?

Şimdiden teşekkürler!

Answer 1

şöyle ı değiştirmek olacaktır:

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

Sonra şablonunda, answers mülkiyet bir repeat.for kullanın. Aurelia'nın bağlama sistemi, answers dizisindeki her öğe için bir <answer> etiketi olmasını sağlayacaktır.

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