两个视图模型的相关观察值？

我正在与美妙的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);

来源

2011-09-05 Mark Robinson

OP在这里。研究发现，如果你使用类如上，你可以参考“这”创建一个依赖属性的时候，所以这意味着我不需要定义相关的属性为每个视图模式：

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

来源

2011-09-06 08:26:13

愚蠢的是，我没有想到这一点。 –

虽然文档不会立即让人明白。使用类似上面我做的类似乎是在付出红利 - 再次不是许多示例中使用的方法（倾向于定义内联视图模型）。 –

是的，但你可以把它与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);

来源

2011-09-05 22:49:00

谢谢，少校。我很怀疑。 +1为jsfiddle示例。好东西。 –

两个视图模型的相关观察值？

回答

相关问题