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

Question

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

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

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

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

大多数例子倾向于将SammyJS路由放在视图模型中，但当页面上有多个视图模型时，我想将SammyJS从单个视图模型移动到它自己，即有一个单独的地方来编辑路由。

我的想法是使用PagerJS轻松地在不同视图之间切换，但它需要在SammyJS中设置的路径和用于PagerJS的数据绑定路径之间进行同步。例如，当选择#!/user时，Sammy中的路由将处理请求并获取要显示的数据，而PagerJS将显示用户页面。对我来说感觉有点脆弱，但这可能是它应该如何工作的。

Answer 1

事先要注意的是：

我正在使用RequireJS将我的应用程序划分成模块-这不是必须的(没有双关语)-你可以把所有的东西都放在一个Javascript文件中并让它工作，我只是发现它更容易组织和使用。This question显示了我的项目是如何布局的。

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

下面的示例可能与您正在做的事情不是100%匹配，但希望它能让您对我正在使用的方法有一个概念。

我的main.js包含所有路由信息，并且在每个路由处理程序中，我使用来自RequireJS的require()来引入用于该路由的模块。每个模块都包含Knockout ViewModel和几个方法，用于为ViewModel加载数据、在特定上下文中绑定数据等。

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