computed observable not updating based on check box values

Question

Hope you are doing great.

I'm currently working on UI interface with KnockoutJS and i want to accomplish the following:

In my UI, i obtain a list of components from a JSON file, (some checkboxes based on bool values, some number input based on int values, etc.). Some components are dependent of others like :

• Enable custom rate ( A checkbox)
  • Custom rate ( Number input)

The custom rate parameter in the JSON file has a field called dependencies in which we define a condition string ("parent1 && parent2").

My idea is to build a isVisible computed observable using the parameters observable array value.

viewModel.isVisible = ko.computed(function(){
        var expr = "Han && Solo";
    var parentVars = expr.split(' && ');
    var result = ko.observable(true);
    for(var i = 0; i < parentVars.length; i++){
            let element = viewModel.getParamByName(parentVars[i],viewModel.paramsArray());
        if(element != 'not found'){
          result = result && element.isVisible();
        }
    }

    return result;

});

I try to implement this idea here: https://jsfiddle.net/bignacio/y32g4801/62/

But the computed result is not binding.

How to fix this issue? is there a better approach to handle the problem?

Thanks for your time.

Answer 1

A computed observable should not return an observable. It should just return a value. Therefore, the fourth line should be:

var result = true;

The computed observable is checking the isVisible property of each matching item, but those items are not bound correctly to the checkboxes. Instead of using the value binding, you should be using the checked binding:

<input type="checkbox" data-bind="checked: $data.isVisible">

https://jsfiddle.net/y32g4801/78/