Using Map as a router

Help Requests
1

Hello guys i’m using a Map<string,function> the key is what is displayed on the list and the value contain an annonym fuction to navigate to a router but in my html when i add click.delegate it’s not fucntionning
image

1 Like
2

@Trobax could you share the html where you defined the click.delegate?

1 Like
3

image
i think instead of using click.delegate i should use route-href ?

1 Like
4

Yes route-href would be better. Change your Map to:

let menuList: Map<string, string> = new Map<string,string>;
if(/* logic */) {
    menuList.Set("Maintenace", "mainteance");
}

and in your html

<div repeat.for="[key, value] of menuList">
    <a class="list-group-item" route-href="route.bind: value;">${key}</a>
</div>
2 Likes
5

it worked for me but i have some cases where i need to pass a parameter in the map itself

image
image708×80 7.17 KB

1 Like
6

@Trobax in this case you could add additional properties to your map.

type RouteEntry = { route: string; params?: any; }
let menuList: Map<string, RouteEntry> = new Map<string, RouteEntry>();
if(/* logic */) {
    menuList.set("Maintenace",  { route: "mainteance" });
    menuList.set("Maintenance Core Services",  { route: "mainteancecoreservice", params: {accesComplet: true } });
}

and in your html

<div repeat.for="[key, value] of menuList">
    <a class="list-group-item" route-href="route.bind: value.route; params.bind: value.params">${key}</a>
</div>

*I did not check if my code actually compiles. So there may be syntax errors :wink:

2 Likes
7

thank you i’ll try that out thank you so much i appreciate that

2 Likes
8

I just played a little bit with a map and the click.delegate. Did you try click.delegate="value()" in your original solution?

Here is my simple example:

2 Likes
9

no i haven’t tried it in my case i have also a case where i execute a method this method open a popup :

 menuList.set(**"Maintenance complète"**, () => {
                **this.loginMaintenance();**
            });


    private loginMaintenance() {
        return new Promise<void>((resolve, reject) => {
            if (true) {
                this.dialogService.open({
                    viewModel: ConfirmNotification
                }).whenClosed(response => {
                    if (!response.wasCancelled) {
                             /*CODE*/
                    }
                }).catch(error => { reject(error); });
            }
        });
    }

this is in the old version where we still using Map<string, () => void>

1 Like
10

In this case please try click.delegate="value()" with parenthesis :wink:

2 Likes
11

the navigateToRoute is undefined

image
image726×247 9.94 KB

i know this gonna happen because i’m showing my liste html as a compose in the container
the list.ts extends from ViewModelBase and the container extends from ViewModelContainerBase and implementing ConfiguresRouter

2 Likes
12

You could try resolving the router directly from the container in your list.ts.

import { Router } from "aurelia-router";
import { Container } from "aurelia-dependency-injection";

export class List {
  router: Router;
  map: Map<string, () => void>;

  constructor() {
    // Resolve the container directly
    this.router = Container.instance.get(Router);
    this.map = new Map<string, () => void>();
    this.map.set("Test", () => {
      this.router.navigateToRoute("test");
    });

    this.map.set("Home", () => {
      this.router.navigateToRoute("home");
    });
  }
}
2 Likes