1

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/

5
  • You don't provide a jsFiddle but expect we do?
    – GôTô
    Jun 12, 2014 at 9:25
  • It would be better for you to provide a fiddle with what you have so far and let people edit that, therefore people can recreate your issue without having to get your code working in the first place
    – Tanner
    Jun 12, 2014 at 9:26
  • @GôTô some problem with our office network, jsfiddle is not opening here
    – seadrag0n
    Jun 12, 2014 at 9:31
  • @seadrag0n There are other sites with the same functionality. Plus, how will you test the fiddle you ask for if you can't visit the site?
    – GôTô
    Jun 12, 2014 at 9:38
  • 1
    @GôTô added link to JSFiddle in my question
    – seadrag0n
    Jun 12, 2014 at 14:22

2 Answers 2

5

You can achieve this using subscribe function:

self.CompnayNameFilter.subscribe(function (value) {
    self.DoFilterOnFilteredData(!!value);

});

self.PhoneNumberFilter.subscribe(function (value) {
    self.DoFilterOnFilteredData(!!value);
});

self.UsernameFilter.subscribe(function (value) {
    self.DoFilterOnFilteredData(!!value);
});

self.DatabaseLocationFilter.subscribe(function (value) {
    self.DoFilterOnFilteredData(!!value);      
});

UPDATE:

Here is a modified working version of your fiddle: http://jsfiddle.net/DianaNassar/dytre/4/

7
  • 2
    +1, But can be shortened to one external one-liner function: self.DoFilterOnFilteredData(!!value);.
    – haim770
    Jun 12, 2014 at 9:33
  • @DianaNassar where should I write the subscribe code exactly? I added the subscribe code in a another function in my view model where I am calling my server side code to bind the data and subscribe functions doesn't seem to work..
    – seadrag0n
    Jun 12, 2014 at 10:22
  • No, not there. Add them anywhere in the viewmodel - after your observable declarations for example. They have to be in the viewmodel and not within another function. Jun 12, 2014 at 10:33
  • @DianaNassar I am using the javascript closure syntax for my view model so I am confused where to add the observable subscriptions. Created fiddle, please modify it jsfiddle.net/seadrag0n/dytre
    – seadrag0n
    Jun 12, 2014 at 14:16
  • @seadrag0n I have posted the complete working code. Also did some refactoring. Jun 12, 2014 at 15:46
1

Here is complete working example.

jsiddle : http://jsfiddle.net/CodingDawg/dytre/3/

 var viewModel = {
    DoFilterOnFilteredData: ko.observable('true'),
    CompnayNameFilter: ko.observable(),
    PhoneNumberFilter: ko.observable(),
    UsernameFilter: ko.observable(),
    DatabaseLocationFilter: ko.observable(),
}

$(function () {
    var handler = function (value) {
        viewModel.DoFilterOnFilteredData( !! value);
    }
    viewModel.CompnayNameFilter.subscribe(handler);
    viewModel.PhoneNumberFilter.subscribe(handler);
    viewModel.UsernameFilter.subscribe(handler);
    viewModel.DatabaseLocationFilter.subscribe(handler);
    ko.applyBindings(viewModel);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.