[英]Knockout JS Binding and Filter Data
I have the following Problem 我有以下问题
I have this Code to load Json Data from a external Web api and Show it in my site this works.. 我有此代码可以从外部Web api加载Json数据,并在我的网站上显示它可以正常工作。
but my Problem is I must FILTER the Data with a Dropdown List 但我的问题是我必须使用下拉列表过滤数据
When i select the Value "Show all Data" all my Data must be Show and when i select the Value "KV" in the Dropdown only the Data with the Text "KV" in the Object Arbeitsort must Show.. 当我选择值“显示所有数据”时,我的所有数据都必须显示,而当我在下拉列表中选择值“ KV”时,则必须显示对象Arbeitsort中带有文本“ KV”的数据。
How can i integrate a Filter in my Code to Filter my Data over a Dropdown ? 如何在代码中集成过滤器以通过下拉列表过滤数据?
and the next is how can i when i insert on each Item where in HTML Rendered a Button to Show Details of this Item SHOWS his Detail Data ? 接下来,当我在每个项目上插入HTML时,如何呈现该项目的详细信息的按钮显示我的详细数据,我该如何处理?
when i click Details in a Item i must open a Box and in this Box i must Show all Detail Data of this specific Item ? 当我单击项目中的详细信息时,我必须打开一个框,并且必须在此框中显示该特定项目的所有详细数据?
$(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());
});
I'll give this a go, but there's quite a few unknowns here. 我会尝试一下,但是这里有很多未知数。 My suggestions are as follows:
我的建议如下:
First, create a computed
for your results and bind to that instead of self.stellenangebote
首先,为您的结果创建
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();
});
});
With regards the detail link, I'm assuming you are doing a foreach
over your data in self.stellenangeboteFiltered()
, so add a column to hold a link to show more details: 关于详细信息链接,我假设您正在对
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>
Add a control to show details: 添加一个控件以显示详细信息:
<div data-bind="visible: detailVisible, with: selectedItem">
<span data-bind="text: Position"> </span>
<span data-bind="text: Arbeitsort"> </span>
</div>
In your JS add a function: 在您的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);
};
UPDATE 更新
Here's an updated fiddle: JSFiddle Demo 这是更新的小提琴: JSFiddle演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.