Router-view binding

Help Requests
1

Hi! I’m trying to build an aplication.
It has basic navigation bar and right below it is a next action bar which is different for every view.
I was thinking about making nested router, but my question is: Is there a way to connect router-view with custom elemen?.
I need that because in router view I’m providing data and in action bar I have save button which is used to save data in my service.
I was also thinking about making sibling router or just take this two elements in one view.
Any suggestion will be appreciated :slight_smile:

1 Like
2

I really wanted to help, but you might need to describe your use case in more details. What did you try to do, what didn’t work, what did you expect instead?

1 Like
3

So basically I’m trying to make an app, that will print data using my “API”, which has getData() and addData(data) methods. To add new data user is redirected to another page with (my custom element) and on it. The first one is just navbar with save and cancel button and dropdown list. The user provides data to save on 4 different views. I need to somehow make the data flow, so that when user hit save it will call “API” and save data. I post code underneath.

Main.html

<template>
   <require from="../../header/nav-bar-restore/navbar"></require>

   <navbar-restore></navbar-restore>
   <router-view></router-view>
</template>

navbar-restore.html

<template>

<div class="menu">
<ul class="menu-elements-restore">
    <li><button class="page-link" click.delegate="cancel()">Cancel</button></li>
    <li><button class="page-link" click.delegate="back()" disabled.bind="disableBack">Back</button></li>
    <li>
      <select class="select-steps" name="steps" value.two-way="current" change.delegate="changeStep(current)">
          <option value="1">Step 1</option>
          <option value="2">Step 2</option>
          <option value="3">Step 3</option>
          <option value="4">Step 4</option>
        </select>
    </li>
    <li><button class="page-link" click.delegate="next()" disabled.bind="disableNext" >Next</button></li>
    <li><button class="page-link" click.delegate="save()">Save</button></li>

</ul>
</div>
</template>
1 Like
4

EDIT: I still don’t think I got the main point of the question, so here’s my third attempt.

If you are looking for a way to access data provided inside router-view, create a service and inject it into all your step views as well as the navbar-restore view. Services are singletons by default, so you can store data in instance variables of the service and all views / other services that inject it will get access to a shared datastore.

If you want even better state management across your entire application, consider using something like aurelia-store (https://aurelia.io/docs/plugins/store).

If you want a way to have access to the router inside your navbar-restore, see my second attempt at an answer below.

Note: below was my second attempt.

I think you can, in your main.js, insideconfigureRouter(config, router), assign this.router = router.

Then in your main.html, bind it to your element <navbar-restore router.bind="router"></navbar-restore>.

Then in your navbar-restore.js, define a @bindable router.

Finally, in your next() / save() / changeStep(), call this.router.navigate() accordingly.

EDIT: I don’t think I got the question the first time, so my original answer below might be irrelevant. I’m keeping it just in case.

Isn’t it the same as having 2 different viewports, one for your content and the other for the navbar?
https://aurelia.io/docs/routing/configuration#rendering-view-ports

1 Like