Mastering TypeScript 3 - Third Edition

Aurelia events

The next requirement for our sample application is to render the currently selected item when a user clicks on one of our buttons. In order to do this, we will need to add a function to our App class to act as an event handler, and then bind the onclick DOM event to this function. Let's modify our app.html template first, as follows:

<div repeat.for="item of items" 
    click.delegate="onItemClicked(item)"> 
    <button > ... 
</div> 

Here, we have added a click.delegate attribute to the <div> tag, and within it, are calling a function named onItemClicked with item as an argument. Note that this delegate is not defined inside the <div> tag, but rather at the <div> tag level itself. This means that the onItemClicked function needs to be ...