knockout.js - 如何在 knockout 中将对象数组添加到可观察数组中？

Question

我通过 ajax 获取大量对象，如果该数组有数据，那么它将被传递给我的 View 模型中的 ImportObservableListItems:

        success: function (data) {
            debugger 
            if (data.length > 0) {

            ReadingList.ImportObservableListItems(data);

            } 

在 View 模型中，我想将每个对象添加到一个可观察的数组中，但我需要每个对象的属性都是可观察的。但是，如果数组包含大量对象，则浏览器会崩溃。有什么办法可以阻止它吗？

self.ImportObservableListItems = function (data) {
            $.each(data, function(index, item) {
                var newListItem = {
                    MediaID: ko.observable(item.MediaID),
                    MediaName: ko.observable(item.MediaName),
                    MediaTypeID: ko.observable(item.MediaTypeID),
                    MediaTypeName: ko.observable(item.MediaTypeName),
                    Group1: ko.observable(item.Group1),
                    Group2: ko.observable(item.Group2),
                    Group3: ko.observable(item.Group3),
                    Group4: ko.observable(item.Group4),
                    Group5: ko.observable(item.Group5)
                };
                ReadingList.ReadingListItems.push(newListItem);
            });
        };

Answer 1

您可以通过一次推送所有项目来减少流失(推送接受多个项目):

var items = $.map(data, function (item) {
    return {
        MediaID: ko.observable(item.MediaID),
        MediaName: ko.observable(item.MediaName),
        MediaTypeID: ko.observable(item.MediaTypeID),
        MediaTypeName: ko.observable(item.MediaTypeName),
        Group1: ko.observable(item.Group1),
        Group2: ko.observable(item.Group2),
        Group3: ko.observable(item.Group3),
        Group4: ko.observable(item.Group4),
        Group5: ko.observable(item.Group5)
    };
});

ReadingList.ReadingListItems.push.apply(ReadingList.ReadingListItems, items);

这将导致在添加所有项目后仅发出一个通知，而不是每个项目一次。