[英]Knockout JS failed to update observableArray
So I'm trying to add content to an observable array, but it doesn't update. 因此,我试图将内容添加到可观察的数组中,但是它不会更新。 The problem is not the first level content, but the sub array.
问题不是第一级内容,而是子数组。 It's a small comments section.
这是一小段评论。 Basically I've this function to declare the comments
基本上我有这个功能来声明评论
function comment(id, name, date, comment) {
var self = this;
self.id = id;
self.name = ko.observable(name);
self.date = ko.observable(date);
self.comment = ko.observable(comment);
self.subcomments = ko.observable([]);
}
I've a function to retrieve the object by the id
field 我有一个通过
id
字段检索对象的函数
function getCommentByID(id) {
var comment = ko.utils.arrayFirst(self.comments(), function (comment) {
return comment.id === id;
});
return comment;
}
This is where I display my comments 这是我显示评论的地方
<ul style="padding-left: 0px;" data-bind="foreach: comments">
<li style="display: block;">
<span data-bind="text: name"></span>
<br>
<span data-bind="text: date"></span>
<br>
<span data-bind="text: comment"></span>
<div style="margin-left:40px;">
<ul data-bind="foreach: subcomments">
<li style="display: block;">
<span data-bind="text: name"></span>
<br>
<span data-bind="text: date"></span>
<br>
<span data-bind="text: comment"></span>
</li>
</ul>
<textarea class="comment" placeholder="comment..." data-bind="event: {keypress: $parent.onEnterSubComment}, attr: {'data-id': id }"></textarea>
</div>
</li>
</ul>
And onEnterSubComment
is the problematic event form 而
onEnterSubComment
是有问题的事件形式
self.onEnterSubComment = function (data, event) {
if (event.keyCode === 13) {
var id = event.target.getAttribute("data-id");
var obj = getCommentByID(parseInt(id));
var newSubComment = new comment(0, self.currentUser, new Date(), event.target.value);
obj.subcomments().push(newSubComment);
event.target.value = "";
}
return true;
};
It's interesting, because when I try the same operation during initialization(outside of any function) it works fine 很有意思,因为当我在初始化过程中尝试相同的操作(在任何函数之外)时,它都能正常工作
var subcomment = new comment(self.commentID, "name1", new Date(), "subcomment goes in here");
self.comments.push(new comment(self.commentID, "name2", new Date(), "some comment goes here"));
obj = getCommentByID(self.commentID);
obj.subcomments().push(subcomment);
If anyone can help me with this, cause I'm kind of stuck :( 如果有人可以帮助我,因为我有点卡住了:(
You need to make two changes: 您需要进行两项更改:
1st, you have to declare an observable array: 1,您必须声明一个可观察的数组:
self.subcomments = ko.observableArray([]);
2nd, you have to use the observable array methods, instead of the array methods. 2,您必须使用可观察的数组方法,而不是数组方法。 Ie if you do so:
即,如果您这样做:
obj.subcomments().push(subcomment);
If subcomments
were declared as array, you'd be using the .push
method of Array
. 如果子
subcomments
被声明为array, subcomments
使用Array
的.push
方法。 But, what you must do so that the observable array detect changes is to use the observableArray
methods. 但是,为了使可观察的数组检测到更改,您必须做的是使用
observableArray
方法。 Ie, do it like this: 即,这样做:
obj.subcomments.push(subcomment);
Please, see this part of observableArray documentation: Manipulating an observableArray : 请参阅observableArray文档的这一部分:操作observableArray :
observableArray exposes a familiar set of functions for modifying the contents of the array and notifying listeners.
observableArray公开了一组熟悉的函数,用于修改数组的内容并通知侦听器。
All of these functions are equivalent to running the native JavaScript array functions on the underlying array, and then notifying listeners about the change
所有这些功能都等效于在基础数组上运行本机JavaScript数组函数,然后将有关更改通知给侦听器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.