Perché questo osservabile knockoutjsArray non causa l'aggiornamento dell'interfaccia utente?

Question

Ho la sensazione che mi manchi qualcosa di semplice qui, ma non riesco proprio a ingannare questo. Ecco il mio script:

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

ed ecco la mia marcatura:

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

ed ecco un jsFiddle: http://jsfiddle.net/5xSmr/

comportamento previsto è che cliccando su 'Aggiungi' causerebbe l'interfaccia utente per l'aggiornamento . il debug rivela che l'addfield viene chiamato.

Answer 1

Risolto il vostro violino: 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()); 

Il problema principale era che si stava chiamando Fields() e non solo campi. Fields() restituisce l'array unwrapped e premendo direttamente su di esso, ko non lo saprebbe mai.

Answer 2

Qui si va :-)

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