Jquery 如何过滤可观察数组并返回相同的

我有可观测阵列。我想根据一些文本过滤可观察的内容。我将选择选项按钮，根据它我需要过滤可观察的数组并绑定到表。这是我到现在为止的密码。 这是我的看法

<table>
<tbody data-bind="foreach: dataOne">
    <tr   >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>

    </tr>
</tbody>

全部的
挑选出来的

这是我的视图模型

 var data1 = [{
  name1: "one",
  id: 1,
display: "<temp>Is this employee</temp> required <val>in our company</val>"
}, {
name1: "two",
id: 2,
 display: "<temp>Is this bachelor</temp>required in our group"
}, {
name1: "three",
id: 3,
 display: "Test"

}];


var viewModel = {
dataOne: ko.observableArray(data1),

};


$("input[name='optbtn']").change(function (e) {
        debugger;
        var str = "<temp>";
        var stringFromArray = "";
        if ($(this).val() == "All") {
            alert("All");
        }
        else {
            ko.utils.arrayFirst(self.dataOne(), function (data) {
                debugger;
                stringFromArray = data.display();
                if (stringFromArray.indexOf(str) == 0) {
                    return data.display();
                }

            });
        }
    });


ko.applyBindings(viewModel);

var数据1=[{
名称1：“一”，
id:1，
显示：“本公司是否需要该员工”
}, {
名字一：“两个”，
id:2，
展示：“我们组需要这位单身汉吗？”
}, {
名字一：“三个”，
id:3，
显示：“测试”
}];
var viewModel={
dataOne:ko.observableArray（data1），
};
$（“输入[name='optbtn']”）。更改（函数（e）{
调试器；
var str=“”；
var stringFromArray=“”；
if（$（this.val（）=“All”）{
警报（“全部”）；
}
否则{
ko.utils.arrayFirst（self.dataOne（），函数（数据）{
调试器；
stringFromArray=data.display（）；
if（stringFromArray.indexOf（str）==0）{
返回data.display（）；
}
});
}
});
应用绑定（视图模型）；

如果我选择“Selected”（已选择）选项按钮，那么它应该只返回文本

“

。 所以它应该只返回2条记录

如何实现这一点？当我加载页面时，它将显示所有记录并将“所有”按钮标记为选中。当我选择“选中”时，它必须过滤记录

更新

---

这是我的

我建议您在选项上使用，而不是手动订阅更改事件

<input name="optbtn" type="radio" value="All" 
       data-bind="checked: selection" />All
 <input name="optbtn" type="radio" 
       data-bind="checked: selection" value="Selected" />Selected

现在您在viewmodel上有了当前选择，您可以添加一个执行过滤的

ko.computed

（请参阅）（它将在每次

viewmodel.selection

更改时触发）：

演示

---

注意：如果要基于标准筛选数组，而不是返回第一个找到的项的

ko.utils.arrayFirst

，则需要使用

ko.utils.arrayFilter

。并且需要从其第二个参数函数返回true/false，以指示是否应包含项。

此过滤器是否为obs数组？看不到其声明的位置请告诉我们是否可以使用obs数组作为Filteredata而不是viewmodel。Filteredata？

Filteredata

是一个计算属性，它返回一个常规数组，因此不是一个可观察的数组。它在

viewmodel.Filteredata=ko.computed（函数（）{

。你不能单独使用数组进行过滤，因为当用户再次选择“全部”时，你需要将项目存储在某个位置以还原它们，因此你最终将得到两个数组。为什么需要观察到它或直接使用数组？我们不能复制obs数组然后再使用它吗？我没有使用过以前是viewmodel.Filteredata。如果可能的话，使用obs阵列让我知道

viewmodel.Filteredata

语法中没有什么特殊之处。它只是在

viewmodel

中添加了一个名为

Filteredata

的新属性。您也可以通过如下方式进行处理：但使用

ko。computed

是一种淘汰方法做这件事的责任。

<input name="optbtn" type="radio" value="All" 
       data-bind="checked: selection" />All
 <input name="optbtn" type="radio" 
       data-bind="checked: selection" value="Selected" />Selected

var viewModel = {
    dataOne: ko.observableArray(data1),
    selection: ko.observable("All")
};

viewModel.filteredData = ko.computed(function () {
    var str = "<temp>";
    if (viewModel.selection() == "All") return viewModel.dataOne();
    return ko.utils.arrayFilter(viewModel.dataOne(), function (data) {
        stringFromArray = data.display;
        if (stringFromArray.indexOf(str) == 0) {
            return true;
        }
    });
});

<tbody data-bind="foreach: filteredData">
    <tr>
        ...
    </tr>
 </tbody>