Wie binden Sie route-href-Parameter in Aurelia dynamisch?

Question

Ich benutze pushState und nicht mit Hashes für die URL-Struktur.

Ich habe einen Weg, und es hat ein paar Parameterbindungen - einige optional:

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

und dann habe ich meine Route-href bekam, und ich habe die notwendigen Bindungen dort:

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

... aber was, wenn ich nicht IMMER alle Routenparameter für eine route-href möchten? Wie in, möchte ich in der Lage sein, nur zu einer Route zu verknüpfen, die chartType und ID verwendet, ohne separate Routen für jede einzelne Parameterkombination zu erstellen, die ich auf dieser Route habe.

Ich weiß, ich kann "?" in der Router-Konfiguration, um eine Route optional zu bestimmen, aber wie mache ich die Parameter optional in meiner Route-href-Links?

so etwas wie dies tun wirft einen Fehler:

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

und ich kann nicht scheinen, .bind Syntax zu verwenden, wie dies (die auch Fehler):

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

Was ist der magische Syntax-Trick hier?

Answer 1

Versuchen Sie, eine chartParams Eigenschaft zu erstellen. Aktualisieren Sie diese Eigenschaft, wenn Sie chart ändern. Dann können Sie dies tun route-href="route.bind: chart; params.bind: chartParams. (Ich habe diesen Ansatz nicht getestet, aber ich denke, es wird funktionieren)

Eine andere Option ist die manuelle Generierung der Route. Zum Beispiel:

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

Dann können Sie es mit dem Link-Tag binden:

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

Answer 2

Das Problem ist, dass während Aureliakann Primitiven, Objekte und Arrays beobachtet, ist es nicht Eigenschaften von Objekten beobachten oder Elemente von Arrays.

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

Dies funktioniert jedoch nicht aktualisiert, wenn chartId, type, viewType und pageNum aktualisiert werden. Der an die Bindung übergebene Wert war das Objekt {id, chartType-Ansicht, Seite}, und Aurelia kann die Eigenschaften dieses Objekts nicht beobachten. Daher ist es am besten, ein Objekt zu generieren.

Vielleicht Ihrer Ansicht nach Modell Sie haben:

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

es diese Verbesserung:

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 }; 
    } 
} 

Jetzt, da der Wert des linkParams Objekt aktualisiert wird, und seine Eigenschaften nicht nur, Aurelia wird es beobachten.Dies ergibt die Lösung, die Fabio gab:

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