Question

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

我读过这篇文章： 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＆amp ;;创建viewModel。最后一个属性，然后 - property full被添加到viewModel对象。

希望这有帮助。

在Knockout JS中展示原型模式的计算可观察量

1 个答案: