如何在基于 API 的多页客户端应用程序中组织路由？

Question

我在 Rails 应用程序上构建 Ruby 方面拥有丰富的经验。但是我从来没有做过基于API的应用程序。最近我把 Knockout 学得很好，因此我知道如何组织我的客户端应用程序，如果它是单页 (SPA)。

我遇到的问题：如果我有基于 API 的多页 (!) 应用程序，我不知道如何管理页面之间的通信。因为我可以硬编码我页面中的所有链接，但如果我决定更改某些内容，它可能很快就会变得难以管理。我想在客户端有某种路由器。你知道框架，或者你知道如何组织所有的路由吗？

Answer 1

PagerJS http://pagerjs.com/demo/#!/start 是为 Knockout 构建的路由框架。这应该可以满足您的单页需求。

如果您指的是让您的应用与 API 资源保持同步：

我们有 api/user 端点。然后创建一个整个应用程序都可以访问的对象，该对象管理涉及用户的所有操作。像

var userUrl = 'api/url'
var userResource = {
    get: function(callback){
        http.get(userUrl, function(err,data){
            callback(data);
        });
    },
    save: function(user, callback){
        http.put(userUrl, function(err, data){
            //...
        });   
    },
//... and so on

这样您就不会在整个应用程序中引用 API url，而只会在用户资源中引用。

Answer 2

Microsoft Knockout SPA 模板中使用的模式可以满足您的大部分要求。这是他们的视图模型结构：

Login    AnotherPage    EtcPage
|_____________|____________|
              |
             App
              |
            Data

"Data" 层是您拥有所有 api 调用 and/or 本地 storage/WebSQL/IndexedDB 东西的地方。您还可以将站点范围内的持久数据存储在 Knockout 可观察对象中，以便于跨页面访问。

"App" 级别包含所有站点范围的视图信息，例如 menu/header 操作。由于始终加载 App 视图模型，因此它是处理导航的好地方。

顶级视图模型包含仅找到那些单独页面（登录等）的代码。它们都将 App 和 Data 视图模型作为参数传递给它们的构造函数：

var LoginViewModel = function(app, dataModel){
  var self = this;
  // etc...
}

现在进行路由： Microsoft 模板如何通过保留视图模型列表来处理路由的要点，然后根据 link 单击分配当前视图模型。我真的不喜欢这种方法。

在这种情况下，我使用了 Finch.js 路由。它非常容易使用，但文档是用 coffeescript 编写的，这很烦人。虽然 Finch 确实提供了在页面之间传递参数的方法，但在这种情况下它是多余的。

如何在基于 API 的多页客户端应用程序中组织路由？

How to organize routing in API-based multipage client-side application?

javascript

api

web-applications

ruby-on-rails