Question

我有一个包含数组的computed变量。像这样：

self.MyArray = ko.computed(function() {
    var source = [];
    // Some Logic to Prepare Array
    ...
    ...
    ...

    return source;
});

现在，在按钮点击事件中，我想从self.MyArray中删除项目。但我找不到任何可行的解决办法。

我试过这个：

self.MyArray.remove(currentRow);

但它抛出异常：

未捕获的TypeError：self.MyArray.remove不是函数

示例小提琴：Fiddle

Answer 1

常规数组

你正在返回一个常规数组，而不是一个淘汰赛observableArray。标准的javascript数组没有删除功能。在以下示例中，我使用了一般删除功能来解决您的问题。

＆＃13;

var bar = "foo";

self.MyArray = ko.computed(function() {
    var source = [];
    source.push(bar);
    return source;
});

function remove(array, element) {
    const index = array.indexOf(element);
    
    if (index !== -1) {
        array.splice(index, 1);
    }
}

console.log(self.MyArray()); // ["foo"]

remove(self.MyArray(), bar);

console.log(self.MyArray()); // []

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

＆＃13;

Knockout ObservableArray

如果您想使用observableArray，则不需要额外的删除功能。淘汰赛observableArray已经有一个。下面的示例显示了如何删除它。

＆＃13;

var bar = "foo";

self.MyArray = ko.computed(function() {
    var source = ko.observableArray();
    source.push(bar);
    return source;
});

console.log(ko.unwrap(self.MyArray())); // ["foo"]

self.MyArray().remove(bar);

console.log(ko.unwrap(self.MyArray())); // []

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

＆＃13;

Answer 2

代码工作需要进行一些更改。我在下面列出了重要的内容：

Name输入的绑定必须是双向的，以允许Add按钮将文本推送到NameList数组。您可以使用textInput或value绑定，而不是text绑定。
```
<input type="text" data-bind="textInput: Name">
```
在向数组添加新项目时，由于它是可观察的，因此必须以self.NameList.push(self.Name());而不是self.NameList.push(self.Name);进行访问。
在remove函数中，您可以获取source元素的索引，然后将其删除。类似的东西：
```
var idx = self.DataSource().indexOf(selectedData);
self.NameList.splice(idx, 1);
```

这里有更新的小提琴：http://jsfiddle.net/afmn2keb/7/

Knockout：从Computed Observable中删除数组项

2 个答案:

常规数组

Knockout ObservableArray