Knockout JS - 在没有 ko.mapping 的情况下观察数组任何属性的突变

Question

在我的应用程序中，我只需要显示长列表中评分最高的前 5 个项目。我已经实现如下：

长列表是一个数组，我已经把它变成了一个可观察数组，所有元素都是使用 ko.mapping 的可观察量，前 5 个项目是一个依赖于长列表的计算数组。每当长列表中的任何内容发生变化时，计算数组都会重新选择长列表并获取前 5 个项目。

我的问题是带有ko.mapping的长数组占用60MB的内存，而没有ko.mapping只需要4MB。有没有办法在不映射长数组的情况下实现这种效果？

这是一个小提琴，我在其中用更小、更简单的长数组重新创建了场景，但这只是为了让您理解我在说什么。

这是长数组，对于演示，我将其长度设为 12 个元素：

this.longArray = ko.mapping.fromJS([
{name:"Annabelle"},
{name:"Vertie"},
{name:"Charles"},
{name:"John"},
{name:"AB"},
{name:"AC"},
{name:"AD"},
{name:"AE"},
{name:"AF"},
{name:"AG"},
{name:"AH"},
{name:"AJ"}
]);

这是计算数组(仅显示前 5 个)：

this.sortedTopItems = ko.computed(function() {
return self.longArray().sort(function(a, b) { 
if(a.name() < b.name()) return -1;
if(a.name() > b.name()) return 1;
return 0;
}).slice(0, 5);
}, this);

更改一个按钮用于模拟长数组更改，重置按钮用于将数组重置为其初始状态。

Answer 1

您当然可以，但最简单的方法是在放入挖空之前过滤数据。如果你只关心前 5 个。假设您的长项目数组称为data。请注意，我现在无法对此进行测试，但它应该会给您一个好主意。

const sortedTopItems = ko.observableArray([]);
// Call with new data
const update = (data) => {
data.sort((a,b) => a.name - b.name);
sortedTopItems(data.slice(0, 5));
}

这处理了无法观察到的简单数据的情况。如果您希望实际的数据项(行)可观察，那么我会执行以下操作：

const length = 5;
// Create an empty array and initialize as the observable
const startData = new Array(length).map(a => ({}));
const sortedTopItems = ko.observableArray(startData);
// Call with new data
const update = (data) => {
data.sort((a,b) => a.name - b.name);
for(let i = 0; i < length; i++) {
const item = sortedTopItems()[i];
ko.mapping.fromJS(data[i], item); // Updates the viewModel from data
}
}