javascript 为什么这个knockoutjs observableArray 不会导致UI 更新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10357469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is this knockoutjs observableArray not causing UI update?
提问by Daniel
I have a feeling I'm missing something simple here, but just can't quite grok this. Here is my 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());
and here is my markup:
这是我的标记：
<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>?
and here is a jsFiddle: http://jsfiddle.net/5xSmr/
这是一个 jsFiddle：http: //jsfiddle.net/5xSmr/
Expected behavior is that clicking 'Add' would cause the ui to update. debugging reveals that addfield is getting called.
预期行为是单击“添加”会导致 ui 更新。调试显示 addfield 正在被调用。
回答by AlexG
Fixed your fiddle: http://jsfiddle.net/5xSmr/2/
修复了你的小提琴：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());
The main problem was that you were calling Fields() and not just Fields. Fields() return the unwrapped array and by pushing directly to it, ko would never know about it.
主要问题是您正在调用 Fields() 而不仅仅是 Fields。Fields() 返回解包的数组，通过直接推送到它，ko 永远不会知道它。
回答by Jason More
Here you go :-)
干得好 ：-）
http://jsfiddle.net/JasonMore/Q6J6a/3/
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
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());
?
?
?
?
