如何使用 Aurelia 使 table 行点击事件正常工作，然后导航到另一个页面

Question

我想创建一个 Master/Detail 页面，其中 table 是您单击某行然后导航到详细信息页面的主页面

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

列表示例：

<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>

Table 示例：

 <table class="table" if.bind="contacts" id="myTable">
      <thead>
      <tr>
        <th>IDs</th>
        <th>Name</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr repeat.for="contact of contacts" class="clickable-row ${contact.id === $parent.selectedId ? 'active' : ''}">
      <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
      <td>${contact.id}</td>
        <td>${contact.name}</td>
      </tr>
      </tbody>
</table>

我知道如何在没有 Aurelia 的情况下使用 jquery 使行 onlick 工作，如

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

但我不知道如何通过单击行来使用 aurelia 导航。

解决方案不一定需要使用 jquery onlcick，只要适合 Master/Detail 场景和 Aurelia

Answer 1

如果你想捕捉点击<tr>具体

<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' }

如何使用 Aurelia 使 table 行点击事件正常工作，然后导航到另一个页面

How to get a table row click event to work using Aurelia that then navigates to another page

aurelia