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

Во-вторых, вы должны использовать наблюдаемые методы массива вместо методов массива. Т.е. если вы сделаете так:

obj.subcomments().push(subcomment);

Если subcomments были объявлены как массив, вы будете использовать .push метод Array, Но то, что вы должны сделать, чтобы наблюдаемый массив обнаружил изменения, это использовать observableArray методы. Т.е. сделать это так:

obj.subcomments.push(subcomment);

Пожалуйста, ознакомьтесь с этой частью документации observableArray: Управление observableArray:

observableArray предоставляет знакомый набор функций для изменения содержимого массива и уведомления слушателей.

Все эти функции эквивалентны выполнению собственных функций массива JavaScript в базовом массиве, а затем уведомляют слушателей об изменении