I am building a set of filters in Knockout and want to store the current filter settings on an object. When any is changed, I need to filter my data.
The subscription to self.filter is never triggered, even though the Filter object changes. Can this be observed?
var Filter = function() {
this.gender = ko.observable("");
this.role = ko.observable("");
};
viewModel = function() {
var self = this;
self.filter = ko.observable(new Filter());
self.filter.subscribe(function(obj) {
console.log("The filter has been modified! (this line never runs)", obj);
});
self.output = function() { console.log("Gender", self.filter().gender(), "Role", self.filter().role());}
};
vm = new viewModel();
ko.applyBindings(vm);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="value: filter().gender">
<option value="">Male or Female</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<select data-bind="value: filter().role">
<option value="">Any</option>
<option value="Student">Student</option>
<option value="Guest">Guest</option>
</select>
<p>
<button data-bind="click: output">
Output Filter values (to prove the object is updated)
</button>
</p>
