如何在Knockout.js的可观察数组内移除redFruits数组中的元素？

嘿，我来帮你搞定这个问题！首先咱们先理清楚当前的代码结构：你的array是一个Knockout可观察数组，但里面的redFruits只是普通的JavaScript数组——如果只是单纯移除元素，两种方式都能实现，但如果需要UI自动响应这个变化，就得把redFruits也改成可观察数组才行。下面分两种场景给你解决方案：

场景1：仅移除元素（无需UI自动更新） #

如果不需要页面自动刷新，你可以直接操作普通数组，用Array.prototype.splice()或者filter()来移除指定项。比如要移除"strawberry"：

function viewModel() { 
    var self = this; 
    self.array = ko.observableArray([ 
        { title: "fruits", description: "array about fruits", redFruits: ["cherry", "strawberry", "raspberry"] } 
    ]);

    // 新增移除方法
    self.removeRedFruit = function(fruitToRemove) {
        // 获取第一个（也是当前唯一的）fruits对象
        var fruitsItem = self.array()[0];
        // 找到要移除元素的索引
        var index = fruitsItem.redFruits.indexOf(fruitToRemove);
        if (index !== -1) {
            fruitsItem.redFruits.splice(index, 1);
            // 注意：因为redFruits不是可观察数组，这里需要手动通知array更新UI（如果需要的话）
            self.array.valueHasMutated();
        }
    };
} 

var test = new viewModel(); 
// 调用方法移除"strawberry"
test.removeRedFruit("strawberry");
ko.applyBindings(test);

这里如果需要UI更新，最后调用self.array.valueHasMutated()来告诉Knockout数组内容变了，因为redFruits不是可观察的，Knockout不会自动追踪它的变化。

场景2：移除元素并自动更新UI（推荐） #

更符合Knockout响应式理念的做法是把redFruits也定义成ko.observableArray()，这样修改它的时候UI会自动更新，不需要手动通知。修改后的代码如下：

function viewModel() { 
    var self = this; 
    self.array = ko.observableArray([ 
        { 
            title: "fruits", 
            description: "array about fruits", 
            redFruits: ko.observableArray(["cherry", "strawberry", "raspberry"]) 
        } 
    ]);

    // 移除指定红果的方法
    self.removeRedFruit = function(fruitToRemove) {
        var fruitsItem = self.array()[0];
        // 直接用observableArray的remove方法
        fruitsItem.redFruits.remove(fruitToRemove);
        // 或者用removeAll移除多个，比如fruitsItem.redFruits.removeAll(["strawberry", "raspberry"])
    };
} 

var test = new viewModel(); 
// 调用方法移除"strawberry"
test.removeRedFruit("strawberry");
ko.applyBindings(test);

这样一来，当你调用removeRedFruit方法后，redFruits数组的变化会自动反映到绑定的UI上，非常方便。

如果你需要根据条件移除（比如移除包含某个字符串的元素），还可以用remove的回调函数版本：

fruitsItem.redFruits.remove(function(fruit) {
    return fruit.includes("berry"); // 移除所有包含berry的元素
});

内容的提问来源于stack exchange，提问作者TEK