Как вы динамически связываете параметры route-href в Aurelia?

Я использую 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 }"

В чем тут магический синтаксический трюк?


parameters binding router routing aurelia
person Nathan Chase    schedule 13.03.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуйте создать свойство chartParams. Обновляйте это свойство при каждом изменении chart. Затем вы можете сделать это route-href="route.bind: chart; params.bind: chartParams. (Я не проверял этот подход, но думаю, что он сработает)

Другой вариант — создание маршрута вручную. Например:

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

Затем вы можете привязать его к тегу ссылки:

<a href.bind="myRoute">My Route</a>
person Fabio Luz    schedule 13.03.2017
comment
Какой ответ не работает? Первый или второй? Есть 2 отдельных ответа - person Fabio Luz; 22.11.2017

arrow_upward
4
arrow_downward

Проблема в том, что хотя 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 }, и Аурелия не может наблюдать за свойствами этого объекта. Поэтому лучше всего создать объект.

Возможно, в вашей модели просмотра у вас есть:

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 будет наблюдать за этим. Это приводит к решению, которое Фабио дал:

<a route-href="route.bind: chart; params.bind: linkParams">link</a>
person Matthew James Davis    schedule 10.12.2017