Почему этот нокаутируемый наблюдаемый массив не вызывает обновление пользовательского интерфейса?

У меня такое чувство, что я пропустил здесь что-то простое, но просто не могу это понять. Вот мой 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());

и вот моя разметка:

<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 получает вызов.

Ответы

Ответ 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());

Основная проблема заключалась в том, что вы вызывали поля(), а не только поля. Поля() возвращают развернутый массив и, нажимая прямо на него, ko никогда не узнает об этом.

Ответ 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());