Tại sao knockoutjs observableArray này không gây ra cập nhật giao diện người dùng?

Question

Tôi có cảm giác mình thiếu một cái gì đó đơn giản ở đây, nhưng không thể hoàn toàn lúng túng điều này. Đây là kịch bản của tôi:

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

và đây là đánh dấu của tôi:

<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>​ 

và đây là một jsFiddle: http://jsfiddle.net/5xSmr/

hành vi dự kiến ​​là cách nhấp vào 'Add' sẽ gây ra ui để cập nhật . gỡ lỗi cho thấy rằng addfield đang được gọi.

Answer 1

Cố định fiddle của bạn: 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()); 

Vấn đề chính là bạn đã gọi Fields() và không chỉ Fields. Fields() trả về mảng chưa được unwrapped và bằng cách đẩy trực tiếp vào nó, ko sẽ không bao giờ biết về nó.

Answer 2

Ở đây bạn đi :-)

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

Xem

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