Knockout JS radio button binding in a for each loop

Question

I'm unable to get the radio button checked even with the text matching the radio button value. `

  <div class="well pull-left clearfix" style="margin:5px;width:90px;padding:5px;" data-bind="click: $root.select_litho_layer_definition, css: {'background-highlight': $root.current_litho_layer_definition() === $data}">
    <p class="text-center tight-padding no-margin"><strong data-bind="text: layer_name"></strong></p>
    <div class="btn-group" style="width:90px">
      <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style="width:90px">
        <span data-bind="text: 'Rev.' + revision"></span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu small-list" data-bind="foreach: $root.litho_layer_name_definitions()[_.indexOf($root.litho_layer_names(), layer_name)]" style="width:90px">
        <li><a data-bind="text: 'Rev.' + revision, click: $root.litho_layer_name_select_revision"></a></li>
      </ul>
    </div>
      
      <!-- ko foreach: exposure_array_names-->
    
    <input type="radio" name="ExposureGroup" value="$parent.layer_name+$data" data-bind="click: $root.litho_layer_name_select_exposure,  checked:$root.litho_layer_exposure"/>
    <span data-bind="text: $data"></span><br>
    <!--/ko-->
  </div>
<!-- /ko -->

`

Each of the litho_layer_name_selected_definitions has an array of exposures called exposure_array_names

Now object structure looks like this.

{
    "litho_layer_definition_sk": 90000026426,
    "exposure_array_names": [
        "IF1_EDGE",
        "Combined"
    ],
    "layer_name": "3HG",
    "revision": 0
}

In the js, I have created an observable object of litho_layer_exposure

self.litho_layer_exposure = ko.observable(true);
self.litho_layer_exposure = ko.computed(function() {
      var maskset = self.maskset();
      if (!maskset) return [];

      var defs = maskset.litho_layer_definitions;
      if (_.isEmpty(defs)) return [];

      var name = self.current_litho_layer_name();
      if (!name) return [];

     var revision = self.current_litho_layer_revision();
      if (!_.isNumber(revision)) return;


_.reduce(defs, function(memo, d) {
        if (d.layer_name === name && d.revision === revision){
        memo.push(_.last(d.exposure_array_names));
    }
        return memo;
      }, []);
    });
    self.litho_layer_exposure.subscribe(function(exposure) {
      if (!_.isEmpty(exposure)) self.current_litho_layer_exposure(_.last(exposure));
    });

I tried making the below change, which didn't work either

self.litho_layer_exposure = ko.computed({
    read: function () {
       
      var maskset = self.maskset();
      if (!maskset) return [];

      var defs = maskset.litho_layer_definitions;
      if (_.isEmpty(defs)) return [];

      var name = self.current_litho_layer_name();
      if (!name) return [];

     var revision = self.current_litho_layer_revision();
      if (!_.isNumber(revision)) return;

    /*var exposure = self.current_litho_layer_exposure();
      if (!exposure) return [];*/

 return _.reduce(defs, function(memo, d) {
        if (d.layer_name === name &&  d.revision === revision) memo.push(d.default_exposure_name);
        return memo;
      }, []);
    },
    write: function (value) {
        //update your self.chosenAge().population value here
self.current_litho_layer_exposure(value);
self.litho_layer_exposure(value);
    },

    owner: self
});
    self.litho_layer_exposure.subscribe(function(exposure) {
      if (!_.isEmpty(exposure)) self.current_litho_layer_exposure(_.last(exposure));
    });

Answer 1

I´m pretty sure the initial error is

value="$parent.layer_name+$data"

which should lead to all inputs have literally "$parent.layer_name+$data" as value

you probably wanted to use a databinding to fill the attribute

data-bind="attr:{value: $parent.layer_name+$data}, checked: ..."