Canjs: multiple pages inside one html

Question

What is the recommended approach to navigate between pages inside single html. for example there are placeholders for list page(#listId) content and for details page (#detailsId) content. Should we use jquery show/hide to #listId or #detailsId with canjs routing mechanizm?

Does canjs support simmilar approach http://api.jquerymobile.com/jQuery.mobile.changePage/?

Answer 1

It will be better if you use the canjs routing, in that way users can copy the link for that page and it will show the correct content when shared. So you could have a control that looks something like:

APP.MainControl = can.Control({
    init: function (ele, options) {
        var view = can.view('t-main', {});
        ele.append(view);
        can.route.ready();
    },

    'list route': 'showList',

    'details route': 'showDetails',

    showList: function (data) {
        // You can load a can view here, 
        // a can controller or just use jquery to show the element
    },

    showDetails: function (data) {
        // ...
    },

});

Alternatively, you can have a can component on the page that binds to can.route, but I don't have an example for that.