javascript - 为什么这个 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/

预期的行为是单击“添加”会导致用户界面更新。调试显示正在调用 addfield。

Answer 1

修复了你的 fiddle :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() 而不仅仅是 Fields。 Fields() 返回展开的数组并直接推送给它，ko 永远不会知道它。