Question

我有可观察的数组。我想根据一些文本过滤observable。我将选择选项按钮，根据它我需要过滤可观察数组并绑定到表。这是我的代码，直到现在。这是我的观点

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

这是我的视图模型

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

如果我选择＆＃34;选择＆＃34;选项按钮然后它应该只返回文本"<temp>。所以它应该只返回2条记录。

我怎样才能做到这一点？当我加载我的页面时，它将显示所有记录并标记＆＃34; All＆＃34;按钮已选中。当我选择＆＃34;选择＆＃34;然后它必须过滤记录。

更新

这是我的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

在您的视图模型中：

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

现在您已在viewmodel上拥有当前选择，您可以添加ko.computed（请参阅doc）进行过滤（每次viewModel.selection更改时都会触发）：< / p>

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

在filteredData：

中使用此foreach

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

演示JSFiddle。

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

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

1 个答案: