具有两个视图模型的依赖可观察量？

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); 
}

如果我在页面中有两个视图模型并且想要添加一个 依赖的可观察对象属性到我的类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 原则使其更易于维护，请查看此示例，其中包含以下视图：

<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);
            }