2013-07-17 72 views
1

我有兩個的ViewModels(雖然我喜歡把「人」的視圖模型的模型):試圖瞭解爲何結合嵌套視圖模型失敗

function Person() { 
    var self = this; 
    self.firstName = ko.observable(""); 
    self.lastName = ko.observable(""); 
} 


function AppViewModel() { 
    var self = this; 
    self.admin = ko.observable(null); 
    self.something = ko.observable("Hello World"); 
} 

然後我設置AppViewModel.admin到人的實例:

var viewModel = new AppViewModel(); 

var bob = new Person(); 
bob.firstName("Sponge"); 
bob.lastName("Bob"); 
viewModel.admin(bob); 

ko.applyBindings(viewModel); 

然後我嘗試綁定到它:

<p><strong data-bind="text: admin.firstName"></strong></p> 
<p><strong data-bind="text: admin.lastName"></strong></p> 
<p><strong data-bind="text: something"></strong></p> 

我預計歐這tput的是:

海綿
鮑勃
的Hello World

但是,這種情況並非如此,而是輸出是簡單的 「Hello World」 的
(很顯然'東西'只是AppViewModel的一個可觀察的部分,所以部分工作)

有人能解釋爲什麼它不起作用,而我應該做的是什麼?

上的jsfiddle的完整的例子:http://fiddle.jshell.net/XRPAH/1/

回答

2

「管理員」是可觀察到的,所以你需要「調用它」訪問所含值:

<p><strong data-bind="text: admin().firstName"></strong></p> 

其實,如果你做

data-bind="text: something" 

這是

data-bind="text: something()" 
只是速記

但是,如果可觀察值是表達式的一部分,如admin.firstName,則需要明確寫下括號。

+0

啊......當然。沒有意識到你必須在綁定中使用它們(或者甚至考慮這樣做)。有時它確實在細節中。 * facepalm *謝謝!爲我節省了很多時間。 – TimothyP

1

你的對象admin是可觀的,所以你需要使用()

例如訪問它:

<p><strong data-bind="text: admin().firstName"></strong></p> 

,並在HTML的第1行相同,應該是這樣的

<p><strong data-bind="text: admin().firstName() + ' '+ admin().lastName()"></strong> 
</p> 

請檢查一下Working Demo

+0

Thnx,你回答Niko後,但仍然謝謝你:) – TimothyP