你如何在 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 的所有路由参数怎么办？比如，我希望能够 link 仅使用 chartType 和 id 的路线，而不必为这条路线上的每个参数组合创建单独的路线。

我知道我可以使用“?”在路由器配置中指定一条可选路由，但是如何在我的路由 href links?

中使参数可选

这样做会引发错误：

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

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

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

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

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

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

Answer 2

问题在于，虽然 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>

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

How do you dynamically bind route-href parameters in Aurelia?

parameters

binding

routing

router

aurelia