Architecture KnockoutJS是否为构建大型web应用程序提供了合适的体系结构？ 快速问题：

KnockoutJS能否为开发大型web应用提供坚实的基础？我担心有一个巨大的viewModel无法维护

背景信息 我将构建一个基于客户端的web应用程序。后端将只是一个RESTful端点。web应用程序的整个界面将构建在纯HTML/CSS/JS中-不涉及服务器端脚本

web应用程序本身将由几个较小的应用程序组成，只需一次普通登录（有点像谷歌的web应用程序，其中有Gmail、文档、日历、阅读器等）

这些web应用程序中的每一个都有一些通用功能（例如侧栏树状视图、顶栏菜单视图、通知系统）和一些应用程序特有的功能。通常我会将我的应用分解为封装功能，比如：

var myNamespace = {
    common: {
        settings: {},
        user: {},
        notifications: {}
    },
    app1: {},
    app2: {},
    app3: {}
};

现在，我真的很喜欢使用KnockoutJS，并且认为它在构建项目的某些元素时会很有帮助（比如通知系统，或者具有自动刷新功能的高级网格视图，因为应用程序将支持协作）。但是我就是不知道把我的viewModel放在这个结构中的什么地方

我只能找到一些关于如何使用KnockoutJS构建应用程序的小例子。你真的能用它构建比Twitter阅读器更先进的东西吗？关于如何分解viewModel中的许多功能，或者分解为许多viewModel，有没有好的示例

提议的解决办法 虽然更多的理论问题（快速问题）在这里仍然没有得到回答，但我认为我已经找到了一个在实践中可行的解决方案@西蒙的回答让我深思，以下是我迄今为止得到的：

// First: a collection of Observables that I want to share
ld.collectionOfObservables = {
    notifications: ko.observableArray([]),
};

// Now let's define a viewModel. I put all my stuff inside the
// 'ld' namespace to avoid cluttering the global object. 
ld.viewModel1 = function (args) {
    // Look inside args and bind all given parameters 
    // Normally you will want args to be an object of Observables. 
    for (var key in args) {
        if (args.hasOwnProperty(key)) {
            this[key] = args[key];
        }
    };
    // So, by now we already have some observables in
    // 'this', if there were any supplied in 'args'.
    // Additionally, we define some model-unique properties/observables
    this.folders = [ 'Inbox', 'Archive', 'Sent', 'Spam' ];
    this.selectedFolder = ko.observable('Inbox');
};
// *** Let's pretend I create similar class and call it ld.viewModel2 ***
ld.viewModel2 = function (args) { .... }

// OK, now go on and instantiate our viewModels!
// This is the fun part: we can provide 0-many observables here, by providing them in an object
// This way we can share observables among viewModels by simply suppling the same observables to different viewModels
var vm1 = new ld.viewModel1({ 
    notifications: ld.collectionOfObservables.notifications,  // we take an Observable that was defined in the collection
});
var vm2 = new ld.viewModel2({ 
    notifications: ld.collectionOfObservables.notifications,  // shared with vm1
});

// Of course, we could just send the entire ld.collectionOfObservables as an array 
// but I wanted to show that you can be more flexible and chose what to share.
// Not easy to illustrate with *one* shared Observable - notifications - 
// but I hope you get the point. :)

// Finally, initiate the new viewModels in a specified scope
ko.applyBindings(vm1, document.getElementById('leftPane')); 
ko.applyBindings(vm2, document.getElementById('bottomPane'));

现在，如果JS具有真正的继承性，那就更好了，因为现在我觉得我所有的viewModels都是从这个开始的：

for (var key in args) {
    if (args.hasOwnProperty(key)) {
        this[key] = args[key];
    }
};

但这只是一个小小的不便。让我知道你的想法

编辑1: 解决方案是否可以像使用

和：

绑定一样简单？有关示例，请参见“”

编辑2: 我觉得我上次的编辑太快了<代码>与：绑定可能有助于代码的结构，但它不会帮助您在这些不同部分之间共享可观察的内容。因此，上面提出的解决方案仍然是可行的。

我使用了部分视图（在Nancy而不是MVC中），每个视图都有自己的淘汰任务，每个视图都有自己的视图模型。我认为它工作得很好——一个复杂的页面被分成许多简单的独立部分。大多数局部视图都有自己的模块/控制器/端点，因此模块也很“瘦”

jQuery模板被删除是一件很遗憾的事情，但这是另一个问题

---

对不起，我刚刚重读了你的帖子：没有服务器端的东西，所以没有办法拆分页面？哎哟我仍然认为很多视图模型是一个不错的选择

您可以使用局部视图，并在它们之间共享观测值

    var some_observable = ko.observable()

    var Model1 = function(something) {
        this.something_1 = something;
    };
    var Model2 = function(something) {
        this.something_2 = something;
    };

    var view_1 = Model1(some_observable);
    var view_2 = Model2(some_observable);

    ko.applyBindings(view_1, document.getElementById('some-id'));
    ko.applyBindings(view_2, document.getElementById('some-other-id'));

    <div id='some-id'>
        <input data-bind='value: something_1' />
    </div>
    <div id='some-other-id'>
        <input data-bind='value: something_2' />
    </div>

var some_observable=ko.observable（）
var Model1=函数（某物）{
this.something_1=某物；
};
var Model2=函数（某物）{
this.something_2=某物；
};
var视图1=模型1（一些可观察到的）；
var视图2=模型2（一些可观察到的）；
ko.applyBindings（view_1，document.getElementById（'some-id'）；
ko.applyBindings（view_2，document.getElementById（'some-other-id'）；

---

我一直在使用此方法在gallery应用程序中维护照片列表，其中一个视图呈现缩略图，另一个视图负责上传。

在我看来，我们可以使用KO并将视图模型共享到功能模块的范围内（例如，具有多个html控件的功能小部件）。我们可以研究使用（Pub/Sub）在页面中的这些功能模块之间进行通信，以保持功能模块以页面解耦和可管理的方式。

这是一篇老文章，但最近我在中为完全相同的目的构建了一个框架。所有内容都是一个组件，甚至有一个视图管理器可以完全切换视图，同时保留历史记录。我还没有对其进行适当的记录，但回购协议附带了一个示例，演示了它的一些功能

---

注意，我还使用了Google闭包编译器。如果正确导出将在html模板中使用的属性，则可以在高级模式下安全地使用它。组件使用goog.events进行通信，现在一切都很干净。我没有使用knockout的订阅实用程序。请随意查看并贡献！我偶尔会更新它。

是的，所以我应该多次调用ko.applyBindings（），并提供可选的第二个参数（scope），对吗？但这将使一个局部视图（比如网格）在另一个局部视图的viewModel（通知）中的某些内容发生更改时更难执行操作…@Jacob-您可以为此使用多个绑定，尽管这通常不是问题。多个绑定调用非常有用的地方是提高非常复杂页面上的响应时间。我将绑定调用分为两部分。我首先绑定到页面上所有立即可见的元素。然后我绑定到所有不立即可见的元素。谢谢你的想法。我必须用它做实验，看看它是否能很好地伸缩。问题是，我需要分享更多的观察值，而不仅仅是一个，就像你的例子一样。因此，我的模型构造函数必须接受0:n个参数。也许它可以处理类似于

var Model1=function（）{var args=arguments；//对于每个参数，将其分配给这个[argumentName]}

。我必须试一下！谢谢你的主意。@Jacob-这项锻炼对你有什么好处？您是否成功地使用了此示例？