click.delegate für ul Artikel in AureliaJS

Question

ul Liste gegeben, wie unten definiert:

<ul click.delegate="onListItemClick()"> 
    <li repeat.for="suggestion of suggestions"> 
     ${suggestion.name} 
    </li> 
</ul> 

Wie gehe ich Vorschlag Objekt onListItemClick? Ich weiß, ich kann click.delegate auf jedem einzelnen li Element setzen und dann erfassen suggestion aber wird es nicht gegen Event Delegation Idee gehen? Ich meine - dann werde ich mehrere Ereignishandler beifügen, und wenn ja, könnte ich einfach mit click.trigger gehen. Ich möchte das nicht tun, weil es möglicherweise Tonnen dieser suggestion Objekte gibt.

Answer 1

Setzen Sie den Click-Handler auf das Element li. Das ist der Sinn der Event-Delegation mit Aurelia. Es erlaubt Ihnen, Dinge einfach so zu tun, ohne dass Sie eine Menge Event-Handler erstellen müssen. Es gibt nur einen Event-Handler, der vom Framework für Sie erstellt wird. Es delegiert die Anrufe. Alle Click-Events der Elemente werden auf die gleiche Funktion gesetzt und Aurelia wird Ihre VM-Methode aufrufen.

Hier ist ein gist.run: https://gist.run/?id=406bf3bc73e415db7afa7d46d7e958d3

<template> 
    You clicked suggestion id "${clickedId}" 
    <ul> 
    <li repeat.for="suggestion of suggestions" click.delegate="handleClick(suggestion)"> 
     ${suggestion.name} 
    </li> 
    </ul> 
</template>