Binding the actual selection

[Alienuser]

Hello together,

i struggled with the folowing idea.

In my polymer-app i have the folowing:

<template is="dom-bind" id="app">
[...]
<my-navigation-menu selected="{{router}}"></my-navigation-menu>
[...]
<app-router selected="{{router}}" trailingSlash="ignore">
                    <app-route path="/login" import="[...].html"></app-route>
                    ...
                    <app-route path="/test" import="[...].html"></app-route>
                </app-router>
</template>

and my my-navigation-menu looks like

<paper-menu class="list" selected="{{router}}" on-iron-select="onMenuSelect">
<a href="#/login">
                <iron-icon icon="login"></iron-icon>
                <span>Login</span>
            </a>
<a href="#/test">
                <iron-icon icon="test"></iron-icon>
                <span>Test</span>
            </a>
</paper-menu>

But the value of router is always "undefined". Is it possible to access the active value from <pp-router?

Thank you!

[Alienuser]

Does anyone has the same problem?

[shanika]

I used on-state-change event of app-router element to get notified and change the selected menu item depending on the selected path. Not sure if there's a better way. I tried it with polymer 0.5 but it should work same in Polymer 1.0 as well.

routeStateChange : function (e) {
if(e.detail.path=="/login"){
this.$.list.selected = 0;
}
}