具有两个视图模型的相关可观察对象？

Question

我正在使用出色的 Knockout.js 库。我正在使用 javascript 类来捕获结构。例如，几个类之一是：

function OverridableFormItemText(defaultId, defaultText, defaultHelpText, overrideId, overrideText, overrideHelpText)
{
    this.DefaultFormItemTextId = ko.observable(defaultId);
    this.DefaultText = ko.observable(defaultText);
    this.DefaultHelpText = ko.observable(defaultHelpText);
    this.OverrideFormItemTextId = ko.observable(overrideId); 
    this.OverrideText = ko.observable(overrideText); 
    this.OverrideHelpText = ko.observable(overrideHelpText); 
}

如果我在页面中有两个视图模型并想将dependent observable property 添加到我的类 OverridableFormItemText，那么 由于需要将视图模型传递给函数，我是否需要这样做两次？

viewModel1.OverridableFormItemText.SomeDependentProperty = ko.dependentObservable(function() {
    return this.DefaultText() + " " + this.OverrideText();
}, viewModel1);

viewModel2.OverridableFormItemText.SomeDependentProperty = ko.dependentObservable(function() {
    return this.DefaultText() + " " + this.OverrideText();
}, viewModel2);

Answer 1

是的，但是您可以使用 DRY 原则使其更易于维护，请查看example 的以下视图：

<p>First name: <span data-bind="text:  viewModel2.firstName"></span></p>
<p>Last name: <span data-bind="text:  viewModel2.lastName"></span></p>
<h2>Hello, <input data-bind="value:  viewModel2.fullName  "/>!</h2>

<p>First name: <span data-bind="text: viewModel.firstName"></span></p>
<p>Last name: <span data-bind="text:  viewModel.lastName"></span></p>
<h2>Hello, <input data-bind="value:  viewModel.myFullName  "/>!</h2> 

还有这段代码：

var viewModel = {
    firstName: ko.observable("Planet"),
    lastName: ko.observable("Earth")
};

var viewModel2 = {
    firstName: ko.observable("Exoplanet"),
    lastName: ko.observable("Earth")
};

function FullNameDependentObservable(viewmodel, f, property) {
    viewmodel[property] = ko.dependentObservable(f, viewmodel);
}

var AddNames = function() {
    return this.firstName() + " " + this.lastName();
};

FullNameDependentObservable(viewModel, AddNames, "myFullName");
FullNameDependentObservable(viewModel2, AddNames, "fullName");

ko.applyBindings(viewModel);
ko.applyBindings(viewModel2);

Answer 2

在这里。发现如果使用上面的类，在创建依赖属性的时候可以引用'this'，这样我就不需要为每个视图模型定义依赖属性了：

            function OverridableFormItemText(defaultId, defaultText, defaultHelpText, overrideId, overrideText, overrideHelpText)
            {

                this.DefaultFormItemTextId = ko.observable(defaultId);
                this.DefaultText = ko.observable(defaultText);
                this.DefaultHelpText = ko.observable(defaultHelpText);
                this.OverrideFormItemTextId = ko.observable(overrideId); 
                this.OverrideText = ko.observable(overrideText); 
                this.OverrideHelpText = ko.observable(overrideHelpText); 
                this.SomeDependentProperty = ko.dependentObservable(function() { return ('Dependent' + this.DefaultText() )}, this);
            }