can.routing : triggering a change to go from #!/foo/bar to #!/foo

Question

I am trying to understand CanJS' routing. So far, I have the following routes set up.

can.route('plant/:plant/', {
    plant : undefined,
    day : undefined
});
can.route('plant/:plant/day/:day', {
    plant : undefined,
    day : undefined
});

I have no listeners set up yet, as I am just trying this out in the console. The following works fine:

can.route.attr({plant : 1}) // ==>  #!plant/1/
can.route.attr({plant : 1, day : 3}) // ==>  #!plant/1/day/3

But after I have done this, I would like to trigger an event to go "up" in the hierarchy, back to the #!/plant/1 level. I tried doing can.route.attr({plant : 1, day : undefined}), but that did not do anything. can.route.attr({plant : 1, day : null}) just resulted in #!plant/1/day/null.

So how do I "reset" the route to now "know" anything about which day it is?

Answer 1

After I learned that can.route is essentially what is known as an Observable I understood that what I was actually trying to do is remove an attribute. And to do that, all one has to do is

can.route.removeAttr('day') // ==> #!plant/1/

Answer 2

I was running into this same issue and wanted to document this here. A better way to implement this is to use the can.route.url method to generate the appropriate route url. Unfortunately canjs does not implement a routeTo method, which would abstract away the following code (and could also determine whether or not to use pushstate when available...):

can.route('plant/:plant');
can.route('plant/:plant/day/:day');

window.location.hash = can.route.url({plant: 1}); // #!plant/1
window.location.hash = can.route.url({plant: 1, day: 2}); // #!plant/1/day/2

Ideally we should be able to do something like this:

can.routeTo({plant: 1});
// #!plant/1        (without pushstate)
// [root]/plant/1   (with pushstate)

NOTE: I will be building this in the next couple weeks and may send a pull request.