Question

我使用pushState，不使用哈希作为网址结构。

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

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

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

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

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

我知道我可以使用＆＃34;？＆＃34;在路由器配置中指定一个可选的路由，但是如何在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

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

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

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

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

<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参数？

2 个答案: