如何在Knockout中使用下拉列表進行篩選

Question

我剛剛開始使用Knockout，我想通過從下拉列表中選擇一個項目來篩選我在UI中顯示的數據。我到目前爲止，但我無法從我的下拉列表中選擇的值，然後，我需要實際篩選基於該值顯示的數據。這是我到目前爲止的代碼：

@model Models.Fixture 

@{ 
    ViewBag.Title = "Fixtures"; 
    Layout = "~/Areas/Development/Views/Shared/_Layout.cshtml"; 
} 
@Scripts.Render("~/bundles/jqueryval") 
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script> 
<script type="text/javascript"> 

    function FixturesViewModel() { 
      var self = this; 
      var baseUri = '@ViewBag.ApiUrl'; 
      self.fixtures = ko.observableArray(); 
      self.teams = ko.observableArray(); 

      self.update = function (fixture) { 

       $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture }); 
      }; 

      self.sortByAwayTeamScore = function() { 
       this.fixtures.sort(function(a, b) 
       { return a.AwayTeamScore < b.AwayTeamScore ? -1 : 1; }); 
      }; 

      self.select = function (team) { 

      }; 

      $.getJSON("/api/fixture", self.fixtures); 
      $.getJSON("/api/team", self.teams); 
    } 

    $(document).ready(function() { 
     ko.applyBindings(new FixturesViewModel()); 
    }); 

    </script> 

<div class="content"> 
    <div> 
     <table><tr><td><select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamId', click: $root.select"> </select></td></tr></table> 
     <table class="details ui-widget-content"> 
      <thead> 
       <tr><td>FixtureId</td><td>Season</td><td>Week</td><td>AwayTeam</td><td><a id="header" data-bind='click: sortByAwayTeamScore'>AwayTeamScore</a></td><td>HomeTeam</td><td>HomeTeamScore</td></tr> 
      </thead>  
      <tbody data-bind="foreach: fixtures"> 
       <tr> 
        <td><span data-bind="text: $data.Id"></span></td> 
        <td><span data-bind="text: $data.Season"></span></td> 
        <td><span data-bind="text: $data.Week"></span></td> 
        <td><span data-bind="text: $data.AwayTeamName"></span></td> 
        <td><input type="text" data-bind="value: $data.AwayTeamScore"/></td> 
        <td><span data-bind="text: $data.HomeTeamName"></span></td> 
        <td><input type="text" data-bind="value: $data.HomeTeamScore"/></td> 
        <td><input type="button" value="Update" data-bind="click: $root.update"/></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

編輯：想通了這一點：

<script type="text/javascript"> 

function FixturesViewModel() { 
     var self = this; 
     var baseUri = '@ViewBag.ApiUrl'; 
     self.fixtures = ko.observableArray(); 

     self.teams = ko.observableArray(); 
     self.TeamName = ko.observable(''); 

     self.filteredItems = ko.computed(function() { 

      var TeamName = self.TeamName(); 
       if (!TeamName || TeamName == "None") { 

          return self.fixtures(); 
         } else { 
          return ko.utils.arrayFilter(self.fixtures(), function (i) { 
           return i.AwayTeamName == TeamName; 
          }); 
       } 
     }); 

     self.update = function (fixture) { 
      $.ajax({ type: "PUT", url: baseUri + '/' + fixture.Id, data: fixture }); 
     }; 

     self.sortByAwayTeamScore = function() { 
      this.fixtures.sort(function(a, b) 
      { return a.AwayTeamScore < b.AwayTeamScore ? -1 : 1; }); 
     }; 

     $.getJSON("/api/fixture", self.fixtures); 
     $.getJSON("/api/team", self.teams); 
} 

$(document).ready(function() { 
    ko.applyBindings(new FixturesViewModel()); 
}); 

<select data-bind="options: teams, optionsText: 'TeamName', optionsCaption: 'Select...', optionsValue: 'TeamName', value:TeamName"> </select> 

Answer 1

篩選基因敲除一般是用computed observable完成。這是一個基本的ViewModel，可以根據類型的下拉列表進行過濾（包括「none」的過濾選項）。

var ViewModel = function(data) { 
    var self = this; 
    self.filters = ko.observableArray(data.filters); 
    self.filter = ko.observable(''); 
    self.items = ko.observableArray(data.items); 
    self.filteredItems = ko.computed(function() { 
     var filter = self.filter(); 
     if (!filter || filter == "None") { 
      return self.items(); 
     } else { 
      return ko.utils.arrayFilter(self.items(), function(i) { 
       return i.type == filter; 
      }); 
     } 
    }); 
}; 

這裏是代碼fiddle，所以你可以玩它。