Dlaczego ta funkcja observableArray knockoutjs nie powoduje aktualizacji interfejsu?

Question

Mam przeczucie, że tutaj brakuje mi czegoś prostego, ale nie mogę tego pojąć. Oto mój skrypt:

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

i tu jest mój znaczników:

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

i tutaj jest jsFiddle: http://jsfiddle.net/5xSmr/

Oczekiwane zachowanie jest, że klikając „Dodaj” spowodowałoby UI do aktualizacji . debugowanie ujawnia, że ​​addfield jest wywoływany.

Answer 1

Poprawiono swoje skrzypce: 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()); 

Głównym problemem było to, że pan dzwoni Fields(), a nie tylko pola. Fields() zwraca odwiniętą tablicę i po naciśnięciu bezpośrednio do niej ko nigdy się o tym nie dowie.

Answer 2

Proszę bardzo :-)

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

View

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