Are there any knockoutjs page/routing frameworks?

问题

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)

回答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.

回答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.

回答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.

回答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.

回答5:

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

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

回答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

来源：https://stackoverflow.com/questions/9705078/are-there-any-knockoutjs-page-routing-frameworks

标签

knockout.js

javascript-framework