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

我刚刚开始使用KnockoutJS，我将它与PagerJS、SammyJS和BootStrap结合使用来构建一个单页应用程序，现在我有点迷路了

让我吃惊的是，我该如何组织视图模型，并以一种简单且可重用的方式将路由和页面结合起来？现在它感觉像是一堆松散的碎片，不太合适，几乎不合适。我已经检查了一些答案，但我仍然没有掌握如何组织应用程序

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

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

大多数示例倾向于将SammyJS路由放在viewmodel中，但当一个页面上有多个viewmodel时，我希望将SammyJS从单个viewmodel移动到单独的位置，即只有一个位置可以编辑路由

---

我的想法是使用PagerJS在不同的视图之间轻松切换，但它需要在SammyJS中设置的路径和用于PagerJS的数据绑定路径之间进行同步。例如，选择时/然后，Sammy中的路由处理请求并获取要显示的数据，PagerJS显示用户页面。我觉得自己有点脆弱，但这可能就是它的工作原理。

事先需要注意的事项：

我习惯于将我的应用程序分成几个模块——这不一定是必需的——没有双关语的意思——你可以把所有的东西都放在一个Javascript文件中，让它工作，我只是觉得组织和使用起来更容易。显示我的项目是如何布置的

我也没有使用SammyJS进行路由，而是使用了Hasher和Hasher。不过，这些概念应该有些相同

下面的例子可能与您正在做的事情不完全相符，但希望它能让您了解我正在使用的方法

mymain.js包含所有路由信息，在每个路由处理程序中，我使用requirefromRequireJS拉入我用于该路由的模块。每个模块都包含敲除ViewModel和一些方法，如加载ViewModel的数据、在特定上下文中绑定它等

main.js以下是我如何处理路由以显示/person/id路由：

person.js的重要部分：

---

你也可以看看,；这是一个框架，它充分利用了淘汰赛和主干网的优势，包括路由和历史支持。感谢您的回复。你的方法看起来确实很有趣。您没有使用任何像pagerjs这样的帮助程序库在视图之间切换-我假设您正在为每个视图使用一个模板？我现在正在考虑摆脱寻呼机，因为它扰乱了我对该如何继续下去的看法。

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

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;
});