jquery - 如何过滤可观察数组并返回相同的值

Question

我有可观察的数组。我想根据某些文本过滤可观察的内容。我将选择选项按钮，根据它我需要过滤可观察数组并绑定(bind)到表。到目前为止，这是我的代码。这是我的看法

<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>

<table >
       <tr>
            <td><input name="optbtn" type="radio" value="All"/> All</td>
            <td><input name="optbtn" type="radio" value="Selected"/> Selected</td>
        </tr>

</table>

这是我的 View 模型

 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);

如果我选择“选定”选项按钮，那么它应该只返回文本 "<temp>在里面。所以它应该只返回 2 条记录。

我怎样才能实现这个目标？当我加载页面时，它将显示所有记录并将“全部”按钮标记为选中。当我选择“选定”时，它必须过滤记录。

更新

这是我的Fiddle

Answer 1

我建议您应该使用checked binding您的选项，而不是手动订阅更改事件。

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

在您的 View 模型中:

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

现在您在 View 模型上有了当前选择，您可以添加一个 ko.compulated (请参阅 doc )来执行过滤(每次您的 viewModel.selection 时都会触发 更改):

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;
        }
    });
});

并在您的foreach中使用这个filteredData:

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

演示 JSFiddle .

注意:如果您想根据条件过滤数组，则需要使用 ko.utils.arrayFilter 而不是返回第一个的 ko.utils.arrayFirst找到项目。并且您需要从其第二个参数函数返回 true/false 来指示是否应包含某个项目。