如何使用Aurelia获得表行单击事件，然后导航到另一个页面

我想创建一个主控/详细信息页面，其中表是您单击行并导航到详细信息页面的主控表

以Aurelia ContactManager为例，将列表替换为表

列表示例：

<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
        <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
          <h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
          <p class="list-group-item-text">${contact.email}</p>
        </a>
</li>

但我不知道如何使用aurelia导航和行单击

---

解决方案不一定需要使用jquery onlcick，只要它适合于使用Aurelia的主/细节场景，如果您想捕获，请单击

<tr repeat.for="contact of contacts" click.delegate="onSelectContact($event, contact)">
    <td style="cursor: pointer;">lalala</td>
</tr>

 $(".class='clickable-row").click(function() {
        window.location = $(this).data("href");
    });

<tr repeat.for="contact of contacts" click.delegate="onSelectContact($event, contact)">
    <td style="cursor: pointer;">lalala</td>
</tr>

import { autoinject } from 'aurelia-framework'
import { Router } from 'aurelia-router'
import { Contact } from '../la/la'

@autoinject
export class Contacts {
    contacts: Array<Contact> = []

    constructor(private router: Router) {
    }

    onSelectContact (event: UIEvent, contact: Contact) {
        ...... // do whatever
        this.router.navigateToRoute('contact', {id: contact.id})
    }

    ...
}

{ route: 'contact/:id', name: 'contact', moduleId: PLATFORM.moduleName('path to module'), title: 'Contact' }