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's really cool that webapi's can be run independent of IIS!

That being said:

Are there any page frameworks that can leverage KnockoutJS which are similar to my mock-up below:

Framework.RegisterRoutes(..,mainViewModel);//sets the CurrentViewModel?

Each route being a separate file of a viewModel, and a view to be injected into the master view

var mainviewModel= function(){
   var self = this;
   self.CurrentViewModel = ko.observable();
   ...
   return self;
}

<div id="mainPageContent" data-bind:'html:CurrentViewModel.Render'>
</div>

I know that a lot of this can be achieved by self, but not sure how to achieve the register routes/ loading separate files

I feel like knockoutjs's main strengths is the ability to not intrude into the way you code js (ie build an object/framework how you want so long as the interacting objects are observable)

Answer 1

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 2

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.

Answer 3

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 4

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 5

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

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

Answer 6

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