Question

我有以下问题

我有这个代码从外部Web api加载Json数据并在我的网站上显示它的工作..

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

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

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

接下来就是当我在每个项目中插入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());
});

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

关于详细信息链接，我假设您正在对foreach中的数据进行self.stellenangeboteFiltered()，因此请添加一列来保存链接以显示更多详细信息：

<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

敲除JS绑定和过滤数据

1 个答案: