Knockout JS 更新 observableArray 失败

Question

所以我正在尝试将内容添加到可观察数组，但它没有更新。问题不是一级内容，而是子数组。这是一个小评论部分。基本上我有这个函数来声明评论

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([]);
}

我有一个通过 id 字段检索对象的函数

function getCommentByID(id) {
    var comment = ko.utils.arrayFirst(self.comments(), function (comment) {
        return comment.id === id;
    });
    return comment;
}

这是我发表评论的地方

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

而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;
};

这很有趣，因为当我在初始化期间（在任何函数之外）尝试相同的操作时，它工作正常

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

如果有人能帮我解决这个问题，因为我有点卡住了:(

Answer 1

您需要进行两项更改：

第一，你必须声明一个可观察数组：

self.subcomments = ko.observableArray([]);

第二，你必须使用可观察数组方法，而不是数组方法。 IE。如果你这样做：

obj.subcomments().push(subcomment);

如果 subcomments 被声明为数组，您将使用 Array 的 .push 方法。但是，要使可观察数组检测到变化，您必须做的是使用 observableArray 方法。即，这样做：

obj.subcomments.push(subcomment);

拜托，see this part of observableArray documentation: Manipulating an observableArray:

observableArray exposes a familiar set of functions for modifying the contents of the array and notifying listeners.

All of these functions are equivalent to running the native JavaScript array functions on the underlying array, and then notifying listeners about the change

Knockout JS 更新 observableArray 失败

Knockout JS failed to update observableArray

html

javascript

knockout.js

knockout-templating