javascript - 在 Knockout JS 中具有揭示原型(prototype)模式的计算可观察量

Question

我有一个使用揭示模块模式和原型(prototype)的项目。这对帮助我使用 Knockout JS 管理大量 Javascript 代码非常有用。这对于标准可观察对象和 Action 等来说是直截了当的。但是当我开始创建一个计算可观察对象时，我似乎无法让它工作。

我读过这篇文章: Difference between knockout View Models declared as object literals vs functions

这似乎准确地描述了我想要的，因为我正在使用对象文字。但是我似乎无法正确实现它。

这是 HTML:

<div data-bind="with: MyForm">
    <p>First Name: <span data-bind="text: formValues.FirstName"></span></p> 
    <p>Last Name: <span data-bind="text: formValues.LastName"></span></p>
    <p>Full Name: <span data-bind="text: formValues.FullName"></span></p>   
</div>

这是 Javascript:

window.Test = window.Test || {};

Test.Main = function () {
    this.viewModel = {};
    this.setupViewModel();

    return {
        viewModel: this.viewModel

    };
};
Test.Main.prototype.setupViewModel = function () {
    var viewModel = function () {
        var vm = this;

        this.MyForm = {
            formValues: {
                FirstName: ko.observable("Joe"),
                LastName: ko.observable("Bloggs")
            }
         }
    };

    /*
    viewModel.MyForm.formValues.FullName = ko.computed(function() {
        return this.FirstName() + " " + this.LastName();
    }, vieModel.MyForm.formValues);
    */
    this.viewModel = new viewModel();
    ko.applyBindings(this.viewModel);

    return this;
}

var mainApplication = new Test.Main();

我在下面创建了一个简单的 JsFiddle 来说明这段代码: http://jsfiddle.net/dontbesorry80/2Ltb790z/

我已经注释掉了我认为的解决方案，因为它不起作用。非常感谢任何有助于调整此 jsFiddle 工作(正确显示全名)的帮助。

Answer 1

这段代码似乎可以正常工作。

Test.Main.prototype.setupViewModel = function () {
    var viewModel = function () {
        var vm = this;

        this.MyForm = {
            formValues: {
                FirstName: ko.observable("Joe"),
                LastName: ko.observable("Bloggs")
            }
         }
    };

    this.viewModel = new viewModel();

    this.viewModel.MyForm.formValues.FullName = ko.computed(function() {
        return this.FirstName() + " " + this.LastName();
    }, this.viewModel.MyForm.formValues);

    ko.applyBindings(this.viewModel);

    return this;
}

不是将 FullName 属性附加到构造函数，而是必须先创建 viewModel，然后将计算变量附加到它。

this 的使用对于在计算函数内获得适当的作用域至关重要。

在引用的 SO 答案中，您可以看到完全相同的场景:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

首先 - 使用 first 和 last 属性创建 viewModel，然后 - 将属性 full 添加到 viewModel 对象。

希望这对您有所帮助。