/ / Интегрирайте iCheck плъгин с нокаут js - knockout.js, icheck

Интегриране на приставката за iCheck с knockout js - knockout.js, icheck

Може ли някой да ми помогне да се интегрирам правилно iCheck плъгин с knockout? защото се опитах да използвам персонализирано свързване, за да инициализирам приставката към моя бутон, но не актуализира стойността на изгледания модел.

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>

нокаут обвързване

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.
}
};

Отговори:

1 за отговор № 1
//trying to change the observabe value
observable.checked = true;

Вие презаписвате наблюдаваното, вместо да го настройвате;

observable.checked(true);

0 за отговор № 2

Помислете дали да направите това двустранно обвързващо, ако сами промените наблюдаваната стойност във вашите компоненти или манипулатори:

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

0 за отговор № 3

това работи за мен:

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

ползване:

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