是否KnockoutJS建设大型的网络应用提供合适的架构？ [英] Does KnockoutJS provide suitable architecture for building large web apps?

问题描述

的将KnockoutJS提供用于开发的大 Web应用程序了坚实的基础？恐怕有一个巨大的视图模型将成为不可维护的。的

Will KnockoutJS provide a solid ground for developing a large web app? I am afraid of having one huge viewModel that will become unmaintainable.

我将建立一个web应用程序，这将是基于大量的客户端。后端将只是一个RESTful端点。 Web应用程序的整个界面将建成纯HTML / CSS / JS - 不涉及服务器端脚本。

I'll be building a web app that will be heavily client-side based. The backend will just be a RESTful endpoint. The entire interface of the web app will be built in pure HTML/CSS/JS - no server side scripting involved.

Web应用程序本身具有一个通用登录（有点像，你有Gmail，Google文档，Google日历，阅读器等谷歌的网络应用程序）由几个较小的应用程序。

The web app itself will consist of several smaller apps with one general login (kind of like Google's web apps where you have Gmail, Docs, Calendar, Reader, etc.).

每个这些Web应用程序将有一些常见的功能（如侧边栏树视图，一顶栏菜单视图，一个通知系统），以及一些应用程序的专有功能。通常我打破我的应用程序到封装的功能，是这样的：

Each of those web apps will have some common functionality (such as a sidebar tree view, a top bar menu view, a notifications system), and some app-unique features. Usually I break my apps down to encapsulate functionality, something like:

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

现在，我真的很享受与KnockoutJS工作和揣摩，建设我的项目的一些元素时，这将是有帮助的（如通知系统，或自动刷新的应用了先进的网格视图会支持合作）。可我就是想不通的地方把我的ViewModel成这种结构。

Now, I really enjoy working with KnockoutJS and figured that it will be helpful when building some elements of my project (such as the notification system, or an advanced grid view with auto-refresh as the app will support collaboration). But I just can't figure out where to put my viewModel into this structure.

我只能找到如何建立与应用KnockoutJS简单的例子。的实际上，你可以建立的东西比Twitter的读者更先进？的有没有对如何打破了很多的视图模型功能的很好的例子，或者到许多的ViewModels？

I can only find trivial examples of how to build apps with KnockoutJS. Can you actually build something more advanced than a Twitter reader with it? Are there any good examples of how to break down a lot of functionality in the viewModel, or perhaps into many viewModels?

而更多的理论问题（快速问题）仍然是一种未在这里，我想我已经在实践中发现的解决方案。 @Simon的回答给了我一些深思，这里就是我这么远：

While the more theoretical question (the Quick question) is still kind of unanswered here, I think I've found a solution that works in practice. @Simon 's answer gave me some food for thought, and here's what I've got so far:

// 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开始与这个原因：

Now, if JS had real inheritance it'd be even better cause right now I feel that all my viewModels start with this:

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

但是，这只是一个小小的不便。让我知道你在想什么！

But that's just a minor inconvenience. Let me know what you think!

编辑1：
可以解决像使用用简单：绑定？请参阅 1.控制流绑定」为例

编辑2：
我认为我的最后一次编辑太快。 与绑定可能与您code的结构有帮助，但据我所知它不能帮助你分享这些不同部分之间的观测。因此，上述建议的解决方案仍是要走的路。

Edit 2: I think my last edit was too quick. with: binding may help with the structure of your code, but AFAIK it doesn't help you share observables between those different parts. So the proposed solution above is still the way to go.

推荐答案

您可以使用部分意见，分享观测它们之间。

You can use partial views and share observables between them.

    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>

我一直在使用这种形式给出，以保持在画廊的应用程序，其中一个观点呈现缩略图列表，照片和其他视图需要上传的照顾。

I've been using this aproach to maintain a list photos in a gallery application, where one view renders thumbnails and another view takes care of uploads.

这篇关于是否KnockoutJS建设大型的网络应用提供合适的架构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！