Are there any knockoutjs page/routing frameworks?

Question

Coming from asp.net MVC 3. In MVC4 they introduced WebAPI\'s. It would be nice to be able to do all view/routes code in javascript and just rely on MVC for API. Heck it\'

Answer 1

Older question, but for reference Durandal is an excellent SPA framework for Knockout:

http://durandaljs.com/documentation/Introduction/

Answer 2

I just open-sourced the mini SPA framework I put together with Knockout being the major component.

knockout-spa A mini (but full-fledged) SPA framework built on top of Knockout, Require, Director, Sugar. https://github.com/onlyurei/knockout-spa

Live Demo: http://knockout-spa.mybluemix.net

Features

• Routing (based on Flatiron's Director): HTML5 history (pushState) or hash.
• Highly composable and reusable: pick modules/components for a page in the page-specific JS and they will be auto-wired for the page's HTML template
• SEO ready (prerender.io)
• Fast and lightweight (85 KB of JS minified and gizpped)
• Two-tier bundle build for JS for production: common module that will be used by most pages, and page-specific modules that will be lazy-loaded
• Organized folder structure to help you stay sane for organizing and reusing JS, CSS, HTML
• Using Knockout 3.3.0+ so ready for Knockout's flavor of web component and custom tags (http://knockoutjs.com/documentation/component-overview.html)
• All documentation are in the major dependencies' own homepages, so that you don't need to completely learn a new framework
  • Knockout http://knockoutjs.com
  • Require http://requirejs.org
  • Director https://github.com/flatiron/director
  • jQuery http://jquery.com
  • Sugar http://sugarjs.com

Answer 3

Pager.js is a URL routing framework built specifically for use with Knockout.js. Make sure you go through the entire Demo to see its full power and flexibility. IMHO, it far exceeds PathJS and Sammy.

Answer 4

I'd like to throw my hat in the running to future Googlers/SOers with ko-component-router.

IMO the API is much more succinct than Pager.js, and having been designed explicitly for KO it has built in goodies like observable route & querystring parameters.

Best of all, it's actively maintained and will remain so for the forseeable future.

DISCLAIMER: I'm the developer of this package.

Answer 5

I've used PathJs with some success, there is also Sammy which is more of a framework. Neither of these are KO specific.

A more heavyweight but KO optimized solution would be Knockback.

Hope this helps.

Answer 6

Sammy.js is an excellent lightweight routing JavaScript library. You can do things like this to route when used in pair with Knockout (from the tutorials web site or KnockoutJS):

$.sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenMailData(null);
        $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
    });

    this.get('#:folder/:mailId', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenFolderData(null);
        $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
    });

    this.get('', function() {
        this.app.runRoute('get', '#Inbox');
    });
}).run();  

Another option is to use SproutCore, but its so much more than nav, so I dont recommend that route unless you want all of SproutCore. There are plenty of other libraries, but I like Sammy.js so far due to how lightweight it is.