淘汰賽JS綁定和過濾數據

我有這樣的代碼從外部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()); 
});

來源

2014-02-25 user3350113

我會放棄這一點，但這裏有很多未知數。我的建議如下：

首先，爲您的結果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); 
};

UPDATE

這裏有一個更新的小提琴：JSFiddle Demo

來源

2014-02-25 10:14:39 Tanner

嗨坦納我不能回答的答案... 我編輯我的帖子befor與答案..... – user3350113

@ user3350113我已經更新計算爲使用var稱爲'過濾器'，過濾器現在在字符串中的任何位置搜索該術語。請注意使用'.toLowerCase'來避免大小寫衝突。 – Tanner

嗨坦納，與新的代碼我成爲沒有數據，也不與'顯示所有數據'作爲過濾關鍵字.... 當我刪除toLowerCase（）;然後將數據返回與篩選器中的「顯示所有數據」關鍵字，但篩選器不適用於任何其他關鍵字.... 我可以通過電子郵件將鏈接發送給我的Web API嗎？原始數據？ – user3350113

淘汰賽JS綁定和過濾數據

回答

相關問題