Knockout JS 绑定和过滤数据

Question

我有以下问题

我有这段代码可以从外部 Web api 加载 Json 数据 并在我的网站上显示它是有效的..

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

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

如何在我的代码中集成过滤器以通过下拉菜单过滤我的数据？

接下来是我如何在 HTML 中呈现按钮的每个项目上插入 显示此项目的详细信息 SHOWS his Detail Data ?

当我单击项目中的详细信息时，我必须打开一个框，并且在此框中我必须显示所有详细信息数据 这个特定的项目？

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

Answer 1

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

首先，为您的结果创建一个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>

添加控件以显示详细信息：

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

在你的 JS 中添加一个函数：

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

更新

这是一个更新的小提琴：JSFiddle Demo