I have the following view:
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" data-bind="text: $root.CompnayNameFilter">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" data-bind="text: $root.PhoneNumberFilter">
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" data-bind="text: $root.UsernameFilter">
</div>
<div class="form-group">
<label>Database Location</label>
<input type="text" class="form-control" data-bind="text: $root.DatabaseLocationFilter">
</div>
I have the following view model:
var viewModel = {
CompnayNameFilter: ko.observable(),
PhoneNumberFilter: ko.observable(),
UsernameFilter: ko.observable(),
DatabaseLocationFilter: ko.observable(),
DoFilterOnFilteredData:ko.computed(function(){
// code to update DoFilterOnFilteredData to false when any other observable changes
})
}
My requirement is that whenever user enters a new value or changes the value in the Company Name
, Phone Number
, User Name
and Database Location
textboxes, I have to set the DoFilterOnFilteredData
value to false. How can I achieve this? I think this is possible using a computed observable.
P.S: If possible, please provide a fiddle for this.
EDIT:
JSFiddle: http://jsfiddle.net/seadrag0n/dytre/