爲什麼knockoutjs observableArray不會導致UI更新？

Question

我有一種感覺，我在這裏錯過了一些簡單的東西，但不能完全贊同這一點。這裏是我的腳本：

function FormDefinition() 
{ 
    var self = this; 
    self.Fields = ko.observableArray([new FieldDefinition()]);  
} 

function FieldDefinition() 
{ 
    var self = this; 
    self.Name = "Test"; 
} 
function ViewModel() 
{ 
    var self = this; 
    self.formDef = ko.observable(new FormDefinition()); 
    self.Name = "bob" 
    self.addField = function(){ 
     this.formDef().Fields().push(new FieldDefinition());      
    }    
} 

ko.applyBindings(new ViewModel()); 

，這裏是我的標記：

<a data-bind="click: addField">Add</a><br/> 
<span data-bind="text: Name"></span> 
<ul data-bind="foreach: formDef().Fields"> 
    <li data-bind="text: Name"></li> 
</ul>​ 

，這裏是一個的jsfiddle：http://jsfiddle.net/5xSmr/

預期的行爲是單擊「添加」會使UI更新。調試顯示addfield正在被調用。

Answer 1

修正你的提琴：http://jsfiddle.net/5xSmr/2/

<a data-bind="click: AddField">Add</a><br/> 
<span data-bind="text: Name"></span> 
<ul data-bind="foreach: formDef().Fields()"> 
    <li data-bind="text: Name"></li> 
</ul> 

function FormDefinition() 
{ 
    var self = this; 
    self.Fields = ko.observableArray();  
} 

function FieldDefinition() 
{ 
    var self = this; 
    self.Name = "Test"; 
} 
function ViewModel() 
{ 
    var self = this; 
    self.formDef = ko.observable(new FormDefinition()); 
    self.Name = "bob" 
    self.AddField = function(){ 
     this.formDef().Fields.push({Name:"test"}); 
    }    
} 

ko.applyBindings(new ViewModel()); 

的主要問題是，你是調用字段（），而不是僅僅領域。 Fields（）返回展開的數組，並直接推送它，ko永遠不會知道它。

Answer 2

在這裏你去:-)

http://jsfiddle.net/JasonMore/Q6J6a/3/

查看

<a href='#' data-bind="click: AddField">Add</a><br/> 
<span data-bind="text: Name"></span> 
<ul data-bind="foreach: formDef.Fields"> 
    <li data-bind="text: Name"></li> 
</ul>​ 

的Javascript

var FormDefinition = function() 
{ 
    var self = this; 
    self.Fields = ko.observableArray();  
} 

var ViewModel = function() 
{ 
    var self = this; 
    self.formDef = new FormDefinition(); 
    self.Name = ko.observable("bob"); 
    self.AddField = function(){ 
     self.formDef.Fields.push({Name:"test"});    
    }    
} 

ko.applyBindings(new ViewModel());