兩個視圖模型的相關觀察值？

我正在與美妙的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示例。好東西。 –

兩個視圖模型的相關觀察值？

回答

相關問題