logo标签列表

有没有任何基于knockoutjs的页面/路由框架？

knockout.jsjavascript-framework
42

我来自asp.net MVC 3。在MVC4中，他们引入了WebAPI。很希望能够在Javascript中完成所有视图/路由代码，并只依赖于MVC的API。事实上，WebAPI可以独立于IIS运行真的很酷！

话虽如此：

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

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

每个路由都是viewModel的单独文件，以及要注入到主视图中的视图

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

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

我知道很多东西可以通过自己实现来完成，但不确定如何实现注册路由/加载单独的文件。

我觉得knockoutjs的主要优势在于它不会干扰你编写js的方式（即构建你想要的对象/框架，只要交互对象是可观察的）。

你应该检查sammyjs。 - dhaval
6个回答
47

Pager.js 是一个专门为 Knockout.js 设计的 URL 路由框架。务必仔细浏览整个演示，以了解其完整的功能和灵活性。在我看来，它远远超过了 PathJS 和 Sammy。

5
为什么这些可用的路由框架都不利用HTML5历史功能呢？所有东西都在使用hashbang #!，而HistoryJS只为Google SEO目的而回退到那个功能...我有什么遗漏吗？- https://github.com/browserstate/history.js - Intellix
2
据文档所述，我理解支持使用historyJS的html5历史记录。它甚至有一个代码示例显示如何启用它。html5历史记录意味着谷歌网络爬虫可以浏览您的网站，但不仅限于爬虫流量。 - Tim
3
看到pager时，我印象非常深刻。虽然Sammy似乎是首选的框架，但我真的很喜欢pager如何适应knockout的工作方式。干得好！ - Pure Function
3
我在多个规模较大的企业项目中成功使用了这个方案。 - maxfridbe
2
Pager.js 支持 History API！请查看文档。 - Oneezy
我已经看过Pager.JS了，老实说，它看起来有点令人不知所措。 我仍然没有掌握如何通过导航事件触发函数，而不是手动处理'click'。 - art-solopov
21

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。

有趣。你认为Sammy.js本身是有限制的，应该再使用KnockoutJS库吗？（我不确定你展示的代码中哪些部分与Knockout相关）。 - Andriy Drozdyuk
我展示的代码都是关于Sammy.js的。Knockout会为您处理数据绑定。Sammy可以与其一起用于路由。我喜欢它，因为它简单、稳定且功能强大。 - John Papa
我在这里看到的最大问题是，对于每个视图，您需要在每个路由中进行新调用以 'self.correspondingObservable(null'。 - pnewhook
3
@pnewhook - 是的，我同意。这就是DRY原则的应用。大部分代码重复出现在每个“get”请求中，因此我创建了一个函数来封装路由设置逻辑。然后我传入一个包含每个路由信息的对象字面量数组。这使得代码非常紧凑，并且能够在不同项目中完全重复使用。 - John Papa
8
我想将我对未来谷歌/堆栈溢出开发者的建议，搭配 ko-component-router，呈现出来。
在我看来，该 API 比 Pager.js 更为简洁，并且由于是专门为 KO 设计的，因此内置了一些好处，如 observable route 和 querystring 参数。
最棒的是，它正在积极地维护，并将在可预见的未来保持这种状态。
免责声明：我是这个软件包的开发人员。
3
我曾经使用PathJs，取得了一些成功。还有Sammy，它更像是一个框架。这两者都不是KO特定的。
一个更加重量级但是KO优化的解决方案是Knockback。
希望这能帮到你。
pathjs工作得很好，但我无法将加载的HTML数据绑定到父页面视图模型的currentviewmodel。 - maxfridbe
@maxfridbe - 这听起来像是一个单独的问题。你能发布一个 jsfiddle 吗？ - madcapnmckay
Knockback页面上没有任何文档。如何开始使用它？ - Andriy Drozdyuk
1
@drozzy - 在 Github 页面上有一些文档 https://github.com/kmalakoff/knockback - madcapnmckay
2
需要注意的是，Durandal似乎正在与angular.js合并，这令人遗憾。http://eisenbergeffect.bluespire.com/angular-and-durandal-converge/ - Randall Sutton
谢谢，是的，我现在处于“等待观察”模式，因为当前的Angular 2.0看起来和Angular 1.0一样奇怪/复杂。Durandal 2.x目前能够满足我的所有需求。 - 7zark7
Durandal现在正在转向Aurelia，“Durandal的下一代”http://aurelia.io/index.html - Homer
1
我刚刚开源了一个迷你SPA框架，其中Knockout是主要组件。 knockout-spa 一个基于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）
  • 所有文档都在主要依赖项的主页上，因此您不需要完全学习新的框架
嘿，我也正在将prerender.io添加到基于KO的SPA中。你是如何使prerender.io集成工作的？我只看到了中间件或apache/nginx的解决方案。在你的knockout-spa代码中，整个代码库中只有一行似乎与prerender相关，并且它在index.html中，但并没有告诉我太多...这足够吗？ - Daniele Dellafiore
嗨，我在Node后端（Sails基于Express）中使用https://github.com/prerender/prerender-node中间件。 - onlyurei
哦，好的，对我没用，我正在使用BaaS，所以我不能使用任何中间件。 - Daniele Dellafiore
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接