How to update Aurelia binding on dynamically added buttons? -


i'm adding new list items have buttons within them. i'd have class adds these buttons able handle click events. ideally, template html string specify click delegate:

let tagtemplatestr = [ '<li class="entered-tag">', '  <span class="tag-label"></span>', '  <button class="remove-tag" click.delegate="removetag()">', '    <i class="fa fa-times" aria-hidden="true"></i>', '  </button>' '</li>'].join(''); 

how can aurelia update bindings or otherwise digest newly injected button click.delegate handled?

use aurelia template bindings, repeat.for

as fabio mentioned, approach "not aurelia". more aurelia friendly approach, bind of logic around buttons viewmodel.

image.js

export class imageviewmodel {      tags: []      addtag(label) {         this.tags.push(label);     } } 

image.html

<div>     <img />     <ul repeat.for="tag of tags">         <li class="entered-tag">           <span class="tag-label"></span>           <button class="remove-tag" click.delegate="removetag()">             <i class="fa fa-times" aria-hidden="true"></i>           </button>         </li>     </ul> </div> 

by doing things way, not bindings handled automatically you, code concise , readable , viewmodel complete.

i cannot answer actual question because not know of way reevaluate bindings within aurelia, aurelia optimized handle of under hood. i've never heard of use case binding reevaluation necessary , above pattern not work.


Comments