javascript - 使用 knockout.js 进行流畅导航

Question

我有一个带有三个子页面的单页应用程序。

网址结构为：

/page  (sub-page-0)

/page#sub-page-1

/page#sub-page-2

视图模型是：

function ViewModel(activePage){
   var self=this;

   self.activePage=ko.observable(activePage);
   self.changePage=function (newPage){
       self.activePage(newPage);
       //change url
   });
}

当用户输入 url 时，我想在 javascript 中获取 # 部分并使用此参数构造 ViewModel。

当用户单击页面中的链接时，我想更改 URL 并加载该子页面。

Answer 1

您可以使用堆栈溢出问题中的一种解决方案：如何在 JavaScript 中获取查询字符串值？

但是，我强烈建议您考虑使用客户端路由库。淘汰赛主页有一个使用sammyjs的示例，但还有许多其他有趣的解决方案（包括knockback，它结合了bonejs 和 knockoutjs）。

Answer 2

Knockout 本身不支持导航。但是您可以使用第三方框架。http://learn.knockoutjs.com/上的淘汰赛中有一个名为“单页应用程序”的教程，它展示了如何使用 sammy.js 做到这一点。