Integrieren Sie das iCheck-Plugin in knockout js - knockout.js, icheck

Kann mir jemand helfen, mich richtig zu integrieren? iCheck Plugin mit knockout? Ich habe versucht, mithilfe der benutzerdefinierten Bindung das Plugin mit meinem Optionsfeld zu initialisieren, der Wert des Ansichtsmodells wird jedoch nicht aktualisiert.

HTML

<div data-bind="foreach: InstituteContactNumber">
<div class="controls multiple-controllers">
<input type="hidden" data-bind="value: CNoId" />
<input class="tb-contact-no" type="text" data-bind="value: CNo" />
&nbsp;
**<input type="radio" name="radio-cno"
data-bind="RadioButton: { checked: IsPrimary }" />**
<i class="fa fa-trash-o ctr-btn" style="color: red;"
data-bind="click: $parent.RemoveContactNo, visible: $index() > 0"></i>
</div>
</div>

Knockout-Bindung

ko.bindingHandlers.RadioButton = {
init: function (element, valueAccessor) {
//initialize icheck to the element
$(element).iCheck({
radioClass: "iradio_square-blue"
});

$(element).on("ifChecked", function () {
var observable = valueAccessor();
// trying to change the observable value
observable.checked = true;
});
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
//initially fires but it not fired when I tried to change the observable value
//I hope that means the value has not been changed
//anyway I have checked the model on submit, it also did not contain the values.
}
};

Antworten:

//trying to change the observabe value
observable.checked = true;

Sie überschreiben das Beobachtbare, anstatt es einzustellen. Sie möchten

observable.checked(true);

Erwägen Sie eine bidirektionale Bindung, wenn Sie den beobachtbaren Wert in Ihren Komponenten oder Handlern selbst ändern:

    ko.bindingHandlers.iCheck = {
init: (el, valueAccessor) => {
var observable = valueAccessor();
$(el).on("ifChanged", function() {
observable(this.checked);
});
},

update: (el, valueAccessor) => {
var val : boolean = ko.utils.unwrapObservable(valueAccessor());
if (val) {
$(el).iCheck("check");
} else {
$(el).iCheck("uncheck");
}
}
};

das funktioniert für mich:

ko.bindingHandlers.iCheck = {
init: function (element, valueAccessor) {
$(element).iCheck({
checkboxClass: "icheckbox_minimal-blue",
radioClass: "iradio_minimal-blue"
});

$(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");
}
}
};

Verwendung:

 <input type="checkbox" class="checkbox" data-bind="iCheck: StaffIsHeadOffice" />Head Office