是否有任何 knockoutjs 页面/路由框架？

Question

来自 asp.net MVC 3。在 MVC4 中，他们引入了 WebAPI。如果能够在 javascript 中完成所有视图/路由代码，并且只依赖 MVC 来获取 API，那就太好了。哎呀，webapi 可以独立于 IIS 运行真是太酷了！

话虽这么说：

是否有任何可以利用 KnockoutJS 的页面框架，类似于我下面的模型：

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

每条路由都是视图模型的一个单独文件，并且是要注入主视图的视图

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

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

我知道很多可以自己实现，但不知道如何实现注册路由/加载单独的文件

我觉得 knockoutjs 的主要优势是能够不干扰您编写 js 的方式（即，只要交互对象是可观察的，就可以按照您的意愿构建对象/框架）

Answer 1

Pager.js 是专为与 Knockout.js 一起使用而构建的 URL 路由框架。确保您浏览了整个 Demo 以了解其全部功能和灵活性。恕我直言，它远远超过了 PathJS 和 Sammy。

Answer 2

Sammy.js 是一个优秀的轻量级路由 JavaScript 库。当与 Knockout（来自教程网站或 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();  

另一种选择是使用 SproutCore，但它不仅仅是导航，所以我不推荐这条路线，除非你想要所有的 SproutCore。还有很多其他的库，但到目前为止我喜欢 Sammy.js，因为它非常轻量级。

Answer 3

我想通过ko-component-router 向未来的 Google 员工/SO 员工致敬。

IMO API 比 Pager.js 简洁得多，并且专为 KO 专门设计，它内置了诸如可观察路由和查询字符串参数之类的好东西。

最重要的是，它得到了积极的维护，并将在可预见的未来保持这种状态。

免责声明：我是这个包的开发者。

Answer 4

我使用PathJs 取得了一些成功，还有Sammy 更像是一个框架。这些都不是 KO 特定的。

更重量级但经过 KO 优化的解决方案是 Knockback。

希望这会有所帮助。

Answer 5

较老的问题，但仅供参考 Durandal 是一个出色的 Knockout SPA 框架：

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

Answer 6

我刚刚开源了我组装的迷你 SPA 框架，其中 Knockout 是主要组件。

淘汰赛水疗中心 建立在 Knockout、Require、Director、Sugar 之上的迷你（但成熟）SPA 框架。 https://github.com/onlyurei/knockout-spa

现场演示： http://knockout-spa.mybluemix.net

特点

• 路由（基于 Flatiron 的 Director）：HTML5 历史记录 (pushState) 或哈希。
• 高度可组合和可重用：在页面特定的 JS 中为页面选择模块/组件，它们将自动连接到页面的 HTML 模板
• SEO 就绪 (prerender.io)
• 快速且轻量级（85 KB 的 JS 压缩和压缩）
• 用于生产的 JS 的两层包构建：大多数页面将使用的通用模块，以及将延迟加载的页面特定模块
• 有序的文件夹结构可帮助您在组织和重用 JS、CSS、HTML 时保持清醒
• 使用 Knockout 3.3.0+ 准备好使用 Knockout 的 Web 组件和自定义标签 (http://knockoutjs.com/documentation/component-overview.html)
• 所有文档都在主要依赖的自己的主页，这样你就不需要完全学习一个新的框架
  • 淘汰赛http://knockoutjs.com
  • 需要http://requirejs.org
  • 导演https://github.com/flatiron/director
  • jQuery http://jquery.com
  • 糖http://sugarjs.com