KnockoutJS是否为构建大型Web应用程序提供了合适的架构？

Question

快速提问:

KnockoutJS会为开发大型网络应用程序提供坚实的基础吗？我害怕有一个巨大的viewModel将变得无法维护.

背景信息

我将构建一个基于客户端的Web应用程序.后端只是一个RESTful端点.Web应用程序的整个界面将以纯HTML/CSS/JS构建 - 不涉及服务器端脚本.

网络应用程序本身将包含几个较小的应用程序和一个通用登录(有点像谷歌的网络应用程序,你有Gmail,文档,日历,阅读器等).

每个Web应用程序都有一些常用功能(例如侧边栏树视图,顶部栏菜单视图,通知系统)以及一些应用程序独特的功能.通常我会将我的应用程序分解为封装功能,例如:

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

现在,我非常喜欢使用KnockoutJS,并认为在构建项目的某些元素时(例如通知系统或具有自动刷新功能的高级网格视图,因为应用程序将支持协作)将会有所帮助.但我无法弄清楚将viewModel放到这个结构中的位置.

我只能找到如何使用KnockoutJS构建应用程序的简单示例.你真的可以建立比Twitter读者更先进的东西吗？有没有很好的例子说明如何在viewModel中分解很多功能,或者可能在很多viewModel中分解？

提出的解决方案

虽然更多理论问题(快速问题)在这里仍然没有答案,但我认为我找到了一种在实践中有效的解决方案.@Simon的回答给了我一些思考的东西,这是我到目前为止所得到的:

// 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有真正的继承,它会更好,因为现在我觉得我的所有viewModel都以这个开头:

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

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

编辑1: 解决方案可以像使用with:绑定一样简单吗？有关示例,请参见" 1.控制流绑定 ".

编辑2: 我认为我的上一次编辑太快了.with:绑定可能有助于代码的结构,但AFAIK它无法帮助您在这些不同的部分之间共享可观察量.所以上面提出的解决方案仍然是要走的路.

Answer 1

您可以使用部分视图并在它们之间共享可观察的视图.

    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>

我一直在使用这个方法来维护一个库应用程序中的列表照片,其中一个视图呈现缩略图,另一个视图负责上传.