click.delegate 对于 AureliaJS 中的 ul 项目
click.delegate for ul items in AureliaJS
给定 ul
列表定义如下:
<ul click.delegate="onListItemClick()">
<li repeat.for="suggestion of suggestions">
${suggestion.name}
</li>
</ul>
如何将建议对象传递给 onListItemClick?我知道我可以将 click.delegate
放在每个单独的 li
元素上,然后捕获当前的 suggestion
但这不会违背事件委托的想法吗?我的意思是 - 然后我将附加多个事件处理程序,如果是这样我可以直接使用 click.trigger
。我不想这样做,因为这些 suggestion
对象可能有很多。
将点击处理程序放在 li
元素上。这就是 Aurelia 事件委托的全部意义所在。它允许你做这样的事情,而不需要创建一堆事件处理程序的开销。只有一个由框架为您创建的事件处理程序。它委托调用。所有元素的点击事件都将设置为相同的函数,Aurelia 将处理调用您的 VM 方法。
这里是 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>
给定 ul
列表定义如下:
<ul click.delegate="onListItemClick()">
<li repeat.for="suggestion of suggestions">
${suggestion.name}
</li>
</ul>
如何将建议对象传递给 onListItemClick?我知道我可以将 click.delegate
放在每个单独的 li
元素上,然后捕获当前的 suggestion
但这不会违背事件委托的想法吗?我的意思是 - 然后我将附加多个事件处理程序,如果是这样我可以直接使用 click.trigger
。我不想这样做,因为这些 suggestion
对象可能有很多。
将点击处理程序放在 li
元素上。这就是 Aurelia 事件委托的全部意义所在。它允许你做这样的事情,而不需要创建一堆事件处理程序的开销。只有一个由框架为您创建的事件处理程序。它委托调用。所有元素的点击事件都将设置为相同的函数,Aurelia 将处理调用您的 VM 方法。
这里是 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>