Polymer starter kit Routes

Question

With the Polymer starter kit, i'm trying to trigger a route change from JS but can't get it working properly. Although the route changes, after i go back and forward again in the browser, the route doesn't get triggered anymore (page.js can't read read lenght), is this the correct way to change a route?

(function() {
    Polymer({
        is: 'my-greeting',

        properties: {
            greeting: {
                type: String,
                value: 'Enter username',
                notify: true
            },
            pass:{
                type:String,
                value: '***',
                notify: true
            }
        },
        buttonClicked : function(){            
            this.doLogin();
        },
        doLogin : function(){
            console.log(this.greeting);            
            app.myFirebaseRef.authWithPassword({
                    "email": this.greeting,
                    "password": this.pass
                }, function(error, authData) {
                    if (error) {
                        console.log("Login Failed!", error);
                    } else {

                        // THIS IS IT

                        app.route = 'users';                            
                        history.pushState({customurl:'users'}, null, 'users');
                    }
                });    
            }            

    });
})();

Try page.show('/users') or simply page('/users'). As far as setting up your Polymer app to show the right page when the route is changed I suggest that you consult the Polymer Start Kit example. It uses page.js. — jptknta
Thanks, the starter kit only uses routes triggered by <a href>'s. I need to do this with JS after a callback. Thats what makes it different. Ill give it go — Patrick Teulings

Thiago Martins Thiago Martins · Accepted Answer · 2015-10-10T18:45:52

You should not try to change your views with app.route = "foo" because it will not reflect in your url

Anyway, could try to use this element https://github.com/MartinsThiago/easy-router for defining your routes as simply as this example

<template is="easy-router" path="#!/route1">
    <span>route1</span>
</template>

<template is="easy-router" path="#!/route1/nested1">
    <span>route1/nested1</span>
</template>

ps: case you need to change your url with this element, do location.hash = "#!/your_route" or window.location.hash = "#!/your_route"

Polymer starter kit Routes

1 Answers