在Knockout JS中使用揭示原型模式的计算观察对象

Computed Observables with Revealing Prototype Pattern in Knockout JS

本文关键字：模式 原型 计算 对象 观察 JS Knockout      更新时间：2023-09-26

我有一个使用揭示模块模式和原型的项目。这对于帮助我使用Knockout JS管理大量Javascript代码非常有用。对于标准的可观察对象和动作等来说，这是直接的。然而，当我已经来创建一个计算观察，我似乎不能得到它的工作。

我读了这篇文章:作为对象字面量声明的knockout视图模型与函数的区别

这似乎准确地描述了我想要的，因为我正在使用对象字面量。然而，我似乎不能正确地实现它。

下面是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工作(正确显示全名)将非常感激。

这段代码似乎起作用了。

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，然后附加计算变量到它。

这个的使用对于在计算函数中获得适当的作用域是至关重要的。

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

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};
viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

First - viewModel是用First &最后一个属性，然后- property full被添加到viewModel对象。

相关文章：