I have just started using Knockout and I want to filter my data that I am displaying in my UI by selecting an item from a dropdown. I have got so far, but I cannot get the selected value from my dropdown yet, and then after that I need to actually filter the data displayed based upon that value. Here is my code so far :
@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>
EDIT : Figured this out :
<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 = koputed(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>
I have just started using Knockout and I want to filter my data that I am displaying in my UI by selecting an item from a dropdown. I have got so far, but I cannot get the selected value from my dropdown yet, and then after that I need to actually filter the data displayed based upon that value. Here is my code so far :
@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>
EDIT : Figured this out :
<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.puted(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>
1 Answer
Reset to default 5Filtering in knockout is generally done with a puted observable. Here is a basic ViewModel that could filter based on a dropdown of types (including a filter option for "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.puted(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;
});
}
});
};
Here is that code in a fiddle, so you can play with it.