Question

我想创建一个主/明细页面，其中表格是您在行上单击的主页，然后导航到详细信息页面

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

表示例：

 <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，只需适用于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使表行单击事件工作，然后导航到另一个页面

1 个答案: