ICheck plugin not working with sublist in Knockout.js

Question

I have a Knockout model containing a bool observable and a list of objects that contain a bool observable.

I have custom binding iCheckedSys, for the bool in the model, to work with iCheck, and custom binding iCheckedPrimary to work with iCheck on the bool in the objects in the model's list.

iCheckedSys functions correctly, and valueAccessor() returns observable. However in the list, valueAccessor() returns false in iCheckedPrimary.

If I just use checkbox for the list objects, it works just fine.

How can I have iCheck work with the list objects? Thanks much.

<div class="form-horizontal no-margin form-border" data-bind="UserViewModel">
   <label>
      <input type="checkbox" data-bind="iChecked: IsSysAdmin">
   </label>

   <tbody data-bind="foreach: RolesList">
      <td><input type="checkbox" data-bind="checked: IsPrimary" /></td>
   </tbody>
</div>

<script>
var Role = function () {
   var self = this;
   self.ID = ko.observable();
   self.IsPrimary = ko.observable();
};

var UserViewModel = function () {
   var self = this;
   self.ID = ko.observable(@Html.Raw(Json.Encode(Model.ID)));
   self.IsSysAdmin = ko.observable(@Html.Raw(Json.Encode(Model.IsSysAdmin)));
   self.RolesList = ko.observableArray();

   ko.bindingHandlers.iChecked = {
      init: function (element, valueAccessor) {
         $(element).iCheck({
            checkboxClass: "icheckbox_minimal-green",
            radioClass: "iradio_minimal-green", increaseArea: "20%"
         });
         $(element).on('ifChanged', function () {
            var observable = valueAccessor();
            observable($(element)[0].checked);
         });
      },
      update: function (element, valueAccessor) {
         var value = ko.unwrap(valueAccessor());
         if (value) {
            $(element).iCheck('check');
         } else {
            $(element).iCheck('uncheck');
         }
      }
   };
};

var viewModel = new UserViewModel();
ko.applyBindings(viewModel);
</script>

Answer 1

I realized that regardless of with record I changed iCheckedPri in, only the last record in viewModel.RolesList was being passed in valueAccessor. So the current record and it's value wasn't being accessed.

I don't know if this is the proper way... but instead of the value, I passed iCheck with the record object itself and updated it with the current checkbox value, and updated iCheck (check/uncheck) with the object value.

<td><input type="checkbox" data-bind="iCheckedPri: $rawData"></td>

ko.bindingHandlers.iCheckedPri = {

        $(element).on('ifChanged', function (event) {
            var observable = valueAccessor();
            observable = $(element)[0].checked;
            valueAccessor().IsPrimary = this.checked;
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        if (value.IsPrimary) {
            $(element).iCheck('check');
        } else {
            $(element).iCheck('uncheck');
        }
    }
};