1

私は観測可能な配列を持っています。いくつかのテキストに応じてオブザーバブルをフィルタリングしたい。オプション ボタンを選択します。それに応じて、監視可能な配列をフィルタリングし、テーブルにバインドする必要があります。これが今までの私のコードです。これが私の見解です

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

「選択済み」オプションボタンを選択すると、テキストのみが返されます "<temp>。したがって、2 つのレコードのみが返されます。

どうすればこれを達成できますか? ページをロードすると、すべてのレコードが表示され、「すべて」ボタンが選択済みとしてマークされます。「選択済み」を選択すると、レコードをフィルタリングする必要があります。

アップデート

ここに私のフィドルがあります

4

1 に答える 1

3

change イベントを手動でサブスクライブするのではなく、オプションでcheckedバインディングを使用することをお勧めします。

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

ビューモデルで現在の選択ができたので、フィルタリングを行う(ドキュメントko.computedを参照) を追加できます (変更のたびにトリガーされます)。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;
        }
    });
});

そして、あなたの中でこれfilteredDataを使用してくださいforeach：

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

JSFiddleのデモ。

注:最初に見つかったアイテムを返すのではko.utils.arrayFilterなく、基準に基づいて配列をフィルター処理する場合に使用する必要があります。ko.utils.arrayFirstまた、2 番目のパラメーター関数から true/false を返して、アイテムを含めるかどうかを通知する必要があります。

于 2013-08-09T14:17:58.103 に答える