如何在 Aurelia 中动态绑定 route-href 参数？

Question

我正在使用 pushState，并且不使用哈希作为 URL 结构。

我有一个路由，它有一些参数绑定 - 一些可选的：

route: [                        
     'chart/:chartType/:id',
     'chart/:chartType/:id/:view?',
     'chart/:chartType/:id/page/:page?',
     'chart/:chartType/:id/:view?/page/:page?'
], 

然后我得到了我的 route-href，在那里我有了必要的绑定：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }"

...但是如果我不总是想要route-href 的所有路由参数怎么办？例如，我希望能够仅链接到使用 chartType 和 id 的路线，而不必为我在这条路线上拥有的每个参数组合创建单独的路线。

我知道我可以使用“？”在路由器配置中指定一个可选路由，但是如何在我的 route-href 链接中使参数可选？

这样做会引发错误：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view?: viewType, page?: pageNum }"

我似乎无法使用.bind 语法，像这样（这也是错误）：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view.bind: hasViewParam, page.bind: hasPageParam }"

这里有什么神奇的语法技巧？

Answer 1

问题在于，虽然 Aurelia 可以观察基元、对象和数组，但它不能观察对象的属性或数组的元素。

<a route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }">link</a>

当chartId、type、viewType 和pageNum 更新时，这将起作用，但不会更新。传递给绑定的值是 { id, chartType view, page } 对象，Aurelia 无法观察到该对象的属性。因此，最好的办法是生成一个对象。

也许在你的视图模型中你有：

export class ViewModel {
  chartId;
  type;
  viewType;
  pageNum;
}

将其增强为：

import { observable } from 'aurelia-framework';

export class ViewModel {

  @observable({ changeHandler: 'generateLinkParams'}) chartId;
  @observable({ changeHandler: 'generateLinkParams'}) type;
  @observable({ changeHandler: 'generateLinkParams'}) viewType;
  @observable({ changeHandler: 'generateLinkParams'}) pageNum;
  linkParams;

  generateLinkParams() {
    const { chartId, type, viewType, pageNum } = this;
    this.linkParams = { chartId, type, viewType, pageNum };
  }
}

现在，由于正在更新 linkParams 对象的值，而不仅仅是它的属性，Aurelia 将观察它。这导致了 Fabio 给出的解决方案：

<a route-href="route.bind: chart; params.bind: linkParams">link</a>

Answer 2

尝试创建chartParams 属性。每当您更改 chart 时更新此属性。然后，您可以这样做route-href="route.bind: chart; params.bind: chartParams。 （我还没有测试过这种方法，但我认为它会起作用）

另一种选择是手动生成路线。例如：

this.myRoute = this.router.generate(routeName, params);

然后，您可以将其绑定到链接标签：

<a href.bind="myRoute">My Route</a>