ICheck 插件不适用于 Knockout.js 中的子列表答案

【问题标题】：ICheck plugin not working with sublist in Knockout.jsICheck 插件不适用于 Knockout.js 中的子列表
【发布时间】：2019-09-27 09:46:54
【问题描述】：

我有一个 Knockout 模型，其中包含一个 bool observable 和一个包含 bool observable 的对象列表。

我有自定义绑定 iCheckedSys，用于模型中的 bool，以使用 iCheck，自定义绑定 iCheckedPrimary 使用 iCheck，用于模型列表中对象中的 bool。

iCheckedSys 功能正确，valueAccessor() 返回 observable。但是在列表中，valueAccessor() 在 iCheckedPrimary 中返回 false。

如果我只对列表对象使用复选框，它就可以正常工作。

如何让 iCheck 处理列表对象？非常感谢。

<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>

【问题讨论】：

标签： javascript html asp.net-mvc knockout.js icheck

【解决方案1】：

我意识到，无论我更改了 iCheckedPri 的记录，只有 viewModel.RolesList 中的最后一条记录被传递到 valueAccessor。所以当前记录及其值没有被访问。

我不知道这是否是正确的方法... 但我没有传递值，而是使用记录对象本身传递 iCheck，并使用当前复选框值更新它，并使用对象值更新 iCheck（选中/取消选中）。

<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');
        }
    }
};

【讨论】：