Hi
I have also struggled with the canjs routing system, ref my post https://forum.javascriptmvc.com/#Topic/32525000001153061
Try this implementation.
The problem with
should work now and you will also see that the correct listeners are called when you change the hash, like window.location.hash = '#!foo/something' or manually in the address bar.
so if you are on the #!bar/blah route want to invoke a different route later with can.route.attr({type:"foo", view:"something"}, true)
should work now and you will also see that the correct listeners are called when you change the hash, like window.location.hash = '#!foo/something' or manually in the address bar.
I have also created a listener that matches empty hash, #, or #!
Note, I do not create a default route, from what I understand it will create a default route when you have a listener like this ':type/:view'.You could also set default values for the route like this: can.route('', {type:'auth', view:'logon'}); . Notice that this is set in the init method.
- var App = can.Control({
- 'init': function() {
- can.route('', {type:'auth', view:'logon'});
- },
- 'auth/:view route': function(data) {
- // default actions on index page (logon page)
- switch(data.view) {
- case 'logon':
- $('#pagecontent').html("auth/" + data.view);
- break;
- default:
- $('#pagecontent').html("Unknown route: auth/" + data.view);
- break;
- }
- },
- 'foo/:view route': function (data) {
- $('#pagecontent').html("foo/" + data.view);
- },
- 'bar/:view route': function (data) {
- switch(data.view) {
- case 'first':
- $('#pagecontent').html("bar/" + data.view);
- break;
- case 'second':
- $('#pagecontent').html("bar/" + data.view);
- break;
- default:
- $('#pagecontent').html("Unknown route: bar/" + data.view);
- break;
- }
- },
- 'route': function(data) {
- $('#pagecontent').append("Empty route fired");
- },
- ':type/:view route': function(data) {
- $('#pagecontent').append("Generic route fired -> not matching any of the other listeners");
- }
- });
- can.route.ready(false);
- new App( document.body ); // create the application + routing controller
- can.route.ready(true);
Does this work for you? At least got you one step closer to what you want to achieve :)?