How do I Implement router in CanJS

Question

I am taking help of the https://github.com/thinkadoo/Projects application. I have built a similar app with the help of this one. My application is using d3 charts instead of the one this uses. My app initializes the routers as

  var patientStatus = new PatientStatus('#application', {'credentials':Credentials,'secret':Secret});

Now if i want to implement Router then what changes should be done? Here is my JSFiddle with both implementations. The first one is working. But the later part where in I am initializing the Router doesnt seem to work. http://jsfiddle.net/sweety1112/YMAjm/

Can some one help me.

Answer 1

Here is an updated Fiddle that shows how routing works:

  var Router = can.Control({
    defaults: {}
  }, {
    init: function() {
      // this.element.html(can.view('#index', {}));
    },

    ':type/:id route': function(data) {
        console.log('Type:', data.type);
        console.log('Id:', data.id);
    }
  });

  can.route.ready(false);
  new Router('#content');
  can.route.ready(true);

Basically, what you do is initialize your named placeholders and tell the controller that this should be handled by the route processor. Now if you go to a URL like #!test/23 the data of the handler will contain a type and id property.