Javascript 剔除JS绑定和筛选数据

我有以下问题

我有以下代码从外部Web api加载Json数据 并在我的网站上展示这个作品

但我的问题是 我必须用下拉列表过滤数据

当我选择值“显示所有数据”时，必须显示我的所有数据 当我在下拉列表中选择值“KV”时，只有数据 对象中带有文本“KV”的Arbeitsort必须显示

如何在代码中集成一个过滤器，通过下拉菜单过滤数据

下一个问题是，当我在HTML中呈现的每个项目上插入一个按钮时，我该怎么做 要显示此项目的详细信息，请显示其详细信息数据

当我在项目中单击“详细信息”时，我必须打开一个框，在此框中我必须显示所有详细信息数据 这一具体项目是什么

$(document).ready(function () {
function StellenangeboteViewModel() {
    var self = this;
    self.stellenangebote = ko.observableArray([]);
    self.Kat = ko.observable('KV');

    $.getJSON('http://api.domain.comn/api/Stellenangebot/', function (data) {
        ko.mapping.fromJS(data, {}, self.stellenangebote);
    });


}

ko.applyBindings(new StellenangeboteViewModel());
});

---

我会试一试，但这里有很多未知因素。我的建议如下：

首先，为结果创建一个

computed

，并绑定到该结果，而不是

self.stellenangebote

self.stellenangeboteFiltered = ko.computed(function () {
    // Check the filter value - if no filter return all data
    if (self.Kat() == 'show all data') {
        return self.stellenangebote();
    }
    // otherwise we're filtering
    return ko.utils.arrayFilter(self.stellenangebote(), function (item) {
        // filter the data for values that contain the filter term
        return item.Arbeitsort() == self.Kat();
    });
});

关于详细信息链接，我假设您正在对

self.stellenangeboteFiltered（）

中的数据执行

foreach

，因此添加一列来保存链接以显示更多详细信息：

<table style="width:300px">
    <thead>
        <tr>
            <th>Id</th>
            <th>Arbeitsort</th>
            <th>Details</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: stellenangeboteFiltered">
        <tr>
            <td><span data-bind="text: Id"> </span></td>
            <td><span data-bind="text: Arbeitsort"> </span></td>
            <td><a href="#" data-bind="click: $parent.showDetail">Detail</a></td>
        </tr>
    </tbody>
</table>

更新

---

这里有一个更新的提琴：

嗨，坦纳，我无法回答。。。我用答案编辑了我的帖子…@user3350113我已经更新了computed，以使用一个名为

filter

的变量，现在filter会在字符串中的任意位置搜索该术语。请注意使用

.toLowerCase

以避免大小写冲突。嗨，Tanner，有了新代码，我就没有数据了，也没有使用“显示所有数据”作为筛选关键字。。。。当我删除toLowerCase（）时；然后返回数据，并在筛选器中使用“Show all Data”关键字，但筛选器不使用任何其他关键字。。。。我可以通过电子邮件将链接发送到我的Web api吗？您可以使用原始数据进行测试吗？您是否将此比较更改为小写？请参见：

filter=='show all Data'

？是，将'show all Data'设置为小写，我将成为所有数据。。。但当我将过滤器设置为“kv”时，没有数据出现。。。。

<div data-bind="visible: detailVisible, with: selectedItem">
    <span data-bind="text: Position"> </span>
    <span data-bind="text: Arbeitsort"> </span>
</div>

// add some observables to track visibility of detail control and selected item
self.detailVisible = ko.observable(false);
self.selectedItem = ko.observable();

// function takes current row
self.showDetail= function(item){
    self.detailVisible(true);
    self.selectedItem(item);
};