淘汰赛：从可计算的可观测值中删除数组项

Question

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

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

    return source;
});

现在，在按钮单击事件上，我想从self.MyArray删除Item。 但是我找不到任何可行的解决方案。

我尝试了这个：

self.MyArray.remove(currentRow);

但这会引发异常：

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

小提琴样本： 小提琴

Answer 1

规则数组

您返回的是常规数组，而不是基因剔除的observableArray。 标准javascript数组没有删除功能。 在下面的示例中，我使用了通用的remove函数来解决您的问题。

 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()); // [] 

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

淘汰赛ObservableArray

如果要改为使用observableArray，则不需要额外的remove函数。 淘汰赛的observableArray已经有一个。 以下示例显示了如何删除它。

 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())); // [] 

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

Answer 2

该代码需要进行一些更改。 我在下面列出了重要的几个：

1. Name输入的绑定必须是双向的，以允许“ Add按钮将文本推入NameList数组。 您可以为此使用textInput或value绑定，而不是text绑定。

    <input type="text" data-bind="textInput: Name"> 

2. 在将新项目添加到数组时，由于它是可观察到的，因此必须作为self.NameList.push(self.Name());进行访问self.NameList.push(self.Name()); ，而不是self.NameList.push(self.Name); 。

3. 在remove函数中，您可以获取源元素的索引，然后将其删除。 就像是：

    var idx = self.DataSource().indexOf(selectedData); self.NameList.splice(idx, 1); 

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