javascript - 如何使用 KnockoutJS、SammyJS 和 pagerJS 组织 SPA

Question

我刚刚开始使用 KnockoutJS，我正在将它与 PagerJS、SammyJS 和 BootStrap 结合使用来构建单页应用程序，但我现在有点不知所措。

令我吃惊的是，我应该如何以一种简单且可重用的方式组织 View 模型并组合路由和页面？现在感觉就像一堆松散的碎片，不太合适，只是差不多。我已经检查了一些关于 SO 的答案，但我仍然没有掌握如何组织应用程序。

目前我在页面上有一个 View 模型，作为概念证明，它只处理用户个人信息和即将发生的事件的显示。但是，现在我必须合并其他类型的信息，并且拥有一个 View 模型似乎不正确，而是多个 View 模型，因为用户应该能够管理他/她的事件、联系人和任务并列出其他用户、事件和任务，等等。还有更多。

几乎所有用户要选择的选项都在数据库中定义。例如，用户任务和解决这些任务的相应操作是在数据库中预定义的。

大多数示例倾向于将 SammyJS 路由放在 View 模型中，但是当页面上有多个 View 模型时，我想将 SammyJS 从单个 View 模型移动到它自己的位置，即只有一个地方可以编辑路由。

我的想法是使用 PagerJS 轻松地在不同 View 之间切换，但它需要在 SammyJS 中设置的路径与用于 PagerJS 的数据绑定(bind)路径之间进行同步。例如，选择＃!/用户时，Sammy中的路由会处理请求并获取要显示的数据，并且Pagerjs显示了用户页面。对我来说感觉有点脆弱，但这也许就是它应该的工作方式。

Answer 1

一些事前注意事项:

我正在使用 RequireJS将我的应用程序分成模块——这不是必需的(没有双关语意)——你可以将所有内容都转储到一个 Javascript 文件中并让它工作，我只是发现它更容易组织和使用。 This question展示了我的项目是如何布局的。

我也没有使用 SammyJS 进行路由，但是 Crossroads和哈希。不过，概念应该有些相同。

下面的示例可能不是 100% 匹配您正在做的事情，但希望它能让您了解我正在使用的方法。

我的 main.js 包含所有路由信息，在每个路由处理程序中，我使用 RequireJS 中的 require() 来拉入我的模块我正在使用那条路线。每个模块都包含 Knockout ViewModel 和一些方法来执行诸如为 ViewModel 加载数据、在特定上下文中绑定(bind)它等操作。

main.js 下面是我如何处理显示 #/person/id 路由的路由:

crossroads.addRoute("person/{id}", function(id){
    require(["person"], function(person) {
        var model = person.load(id);
        person.view($('#content'), model);
    });
});

person.js 的重要部分:

define(['jquery', 'knockout', ...], function($, ko, ...) {
    var person = {};
    person.Model = function Model(id) {
        this.id = ko.observable(id);
        this.name = ko.observable();
        // more properties and methods removed...
    };

    person.load = function(id) {
        var model = new person.Model(id);
        var request = $.ajax({
            // ajax config properties removed...
            'success' : function(resp) {
                model.name (resp.name);
                // more property setting removed...
            }
        });
        return model;
    };

    person.view = function(element, model) {
        // Using require text plugin to load templates...
        require(['text!templates/person/view.tmpl.html'], function(ViewTemplate) {
            element.empty();
            element.html(ViewTemplate).ready(function() {
                ko.applyBindings(model, element.get(0));
                // any further setup needed below...
            });
        });
    };
    return person;
});