To finish off the project we can add filtering so that the different types of elements can be shown. The data for the table contains a column we haven't used yet – the state of the element (the actual physical element, not an HTML element!)
In this task, we can add a <select> element that allows us to filter elements by their state.
First we need to add a new observable array to the ViewModel, which will be used to store objects that represent the different states an element can be:
states: ko.observableArray(),
We can also add a simple non-observable property to the ViewModel:
originalElements: null,
Next we need to populate the new array. We can do this outside of our ViewModel, directly after where we call vm.manageClasses():
var tmpArr = [],
refObj = {};
tmpArr.push({ state: "Filter by..." });
$.each(vm.elements(), function(i, item) {
var state = item.state;
if (!refObj.hasOwnProperty(state)) {
var tmpObj = {state: state}...