If I had a simple route definition and controller as below, none of the specific route handlers get called (e.g. 'foo/:view' if type=foo). Only the ':type/:view' route is fired. I want to avoid having a giant switch statement to handle a route and rather have a set of explicit callbacks for specific routes. The question is, is this possible with can.route?
I have also tried defining specific routes like can.route("foo/:view", {type="foo"}) but that doesn't work. The routing system treats the foo/ prefix as just text and doesn't understand that it is actually the type, 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), you get #!bar/something?type=foo, which is not what I want.
I have also tried defining specific routes like can.route("foo/:view", {type="foo"}) but that doesn't work. The routing system treats the foo/ prefix as just text and doesn't understand that it is actually the type, 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), you get #!bar/something?type=foo, which is not what I want.
- can.route(":type/:view");
var App = can.Control({
'auth/:view route': function(data) {
// default actions on index page (logon page)
switch(data.view) {
case 'logon':
('#pagecontent').html("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;
}
},
':type/:view route': function(data) {
$('#pagecontent').html("Generic route fired");
}
});
// you have to wait until document ready to wire up the routes, otherwise you get undefined reading the attributes. This is supposed to work per the forums
can.route.ready(false);
// logging route listener
can.route.bind("change", function(ev, attr, how, newVal, oldVal) {
console.log("Route update: ", attr, how, oldVal, " => ", newVal);
});
new App( document ); // create the application + routing controller
can.route.ready(true);