如何更新对象数组中元素的排序？已用KnockoutJS处理元素移动

嘿，这个问题其实很好解决！你已经搞定了元素移动的核心步骤，剩下的order属性更新只需要一个统一的遍历赋值逻辑就可以完美实现需求啦。

核心思路 #

不管你把元素移到哪个位置，最终每个元素的order值都应该和它在数组中的位置索引+1对应（因为你的order是从1开始计数的）。所以我们只需要在完成元素移动后，遍历数组重新给每个元素的order赋值即可。

具体实现步骤 #

1. 完成元素移动：用你已经在使用的KnockoutJS方法移除并插入元素
2. 批量更新order属性：遍历数组，将每个元素的order设置为它的索引+1

代码示例 #

首先，我们先写一个通用的order更新函数，方便复用：

function updateOrderIndices(observableArray) {
    // 获取底层的普通数组
    const array = observableArray();
    array.forEach((item, index) => {
        // 普通属性直接赋值
        item.order = index + 1;
        
        // 如果你的order是Knockout observable属性，改成下面这行：
        // item.order(index + 1);
    });
    // 若修改的是普通属性，需手动触发UI更新的话可调用：
    // observableArray.valueHasMutated();
}

场景1：将第一个元素移至末尾

// 初始化你的observableArray
const list = ko.observableArray([
    {id:100, order: 1}, 
    {id:101, order:2}, 
    {id:102,order:3}, 
    {id:103,order:4}, 
    {id:104,order:5}
]);

// 移动元素：移除第一个，添加到末尾
const firstItem = list()[0];
list.remove(firstItem);
list.push(firstItem);

// 更新order
updateOrderIndices(list);

// 此时list()的结果就是你期望的：
// [{id:101, order:1}, {id:102,order:2}, {id:103,order:3}, {id:104,order:4}, {id:100, order: 5}]

场景2：将倒数第二个元素移至首位

// 初始化数组
const list = ko.observableArray([
    {id:100, order: 1}, 
    {id:101, order:2}, 
    {id:102,order:3}, 
    {id:103,order:4}, 
    {id:104,order:5}
]);

// 移动元素：获取倒数第二个，移除后插入到首位
const secondLastItem = list()[list().length - 2];
list.remove(secondLastItem);
list.splice(0, 0, secondLastItem);

// 更新order
updateOrderIndices(list);

// 此时list()的结果就是：
// [{id:103,order:1}, {id:100, order: 2}, {id:101, order:3}, {id:102,order:4}, {id:104,order:5}]

额外提示 #

• 如果你的order是Knockout的observable属性，一定要用item.order(index + 1)的方式赋值，这样UI会自动更新；如果是普通属性，修改后可能需要调用observableArray.valueHasMutated()来手动通知UI变化。
• 这个方法适用于任何元素移动场景，不管你把元素移到哪个位置，只要移动完成后调用updateOrderIndices就能保证order值和位置对应。

内容的提问来源于stack exchange，提问作者Sarath S Nair