javascriptcanjscanjs-routing

How do I Implement router in CanJS


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.


Solution

  • 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.