将淘汰视图模型拆分为多个文件答案

【问题标题】：Splitting knockout view model into multiple files将淘汰视图模型拆分为多个文件
【发布时间】：2014-09-19 13:55:52
【问题描述】：

我的视图模型开始变得非常大，因此我决定将其拆分为多个文件。我已经尝试了许多不同的方法，但没有任何效果。

我的视图模型如下所示：

namespace.model = function(constructorParam) {
    var self = this;

    self.param1 = ko.observable(constructorParam.param1);
    self.param2 = ko.observable(privateFunction(constructorParam));

    self.clickEvent = function() {
        // do something with params
        // call some private funcitons
        privateFunction2(self.param2);
    };

    function privateFunction(param) {
        // do some stuff
    }

    function privateFunction2(param) {
        // do some stuff
    }
};

我需要跨多个文件访问私有函数和可观察参数。我的最终模型应该是这样的：

// file 1 
// contains constructor and param initialization + many common private helper funcitons
namespace.model = function(constructorParam) {
    var self = this;

    self.param1 = ko.observable(constructorParam.param1);
    self.param2 = ko.observable(privateFunction(constructorParam));

    function privateFunction(param) {
        // do some stuff
    }

    function privateFunction2(param) {
        // do some stuff
    }
};

// file 2
// contains event hendlers
self.clickEvent = function () {
    // i need to acces properties from namespace.model
    self.param1

    // call some private funcitons
    privateFunction2(self.param2);
};

// view model initialization
ko.applyBindings(new namespace.model(initValues));

是否有可能通过淘汰赛实现这样的目标？谢谢

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

我会看看像 RequireJS 这样的库，它可以用来将您的视图模型拆分为不同的“模块”，然后将它们加载到您的主视图模型中。

在 Knockout 网站here 上有一些非常简单的使用 RequireJS 和 Knockout 的示例。

看看 John Papa 关于构建单页应用程序 here 的一些非常有用的帖子。

【讨论】：

没有RequireJS可以做到吗？
@MajoB，是的，这可以在没有 RequireJS 的情况下完成。但是，使用 RequireJS 之类的库的好处之一是它使依赖项变得明确，如果您按照此处所述从部件组合模型，这将非常有用。

【解决方案2】：

我终于找到了一种方法here。这是一个完整的例子：

<div>
    Name: <input data-bind="value: name" type="text" /> <br /> 
    Surname: <input data-bind="value: surname" type="text" /><br />
    Fullname: <span data-bind="text: fullName"></span><br />
    <button data-bind="click: showName">Show Name</button>
</div>

<script>

    Function.prototype.computed = function () {
        this.isComputed = true;
        return this;
    };

    Object.prototype.makeComputeds = function () {
        for (var prop in this) {
            if (this[prop] && this[prop].isComputed) {
                this[prop] = ko.computed(this[prop], this, { deferEvaluation: true });
            }
        }
    };
    // file 1
    var namespace = namespace || {};

    namespace.model = function (params)
    {
        var self = this;

        self.name = ko.observable(params.name);
        self.surname = ko.observable(params.surname);

        self.makeComputeds();
    };

    // file 2
    (function () {
        function showFullName(fullName) {
            alert(fullName);
        }

        ko.utils.extend(namespace.model.prototype, {

            showName: function() {
                showFullName(this.fullName());
            },
            // computed observable
            fullName: function() {
              return this.name() + " " + this.surname();
            }.computed()

        });

    })();

    ko.applyBindings(new namespace.model({ name: "My Name", surname: "My Surname" }));

</script>

编辑

有一个名为Durandal 的项目结合了RequireJS 和KnockoutJS。如果您对 KnockoutJS 的 SPA 架构最佳实践感兴趣，值得一看。

【讨论】：