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?' 
], 

、その後、私は私のルートの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

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

問題はアウレリアはプリミティブ、オブジェクトと配列を観察することができますが、それは、オブジェクトのプロパティを観察することができないということですまたは配列の要素。

<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オブジェクトの値から更新されているだけではなく、そのプロパティを、アウレリアはそれを観察するでしょう。この結果、Fabioのソリューションが得られました。

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