将 iCheck 插件与淘汰赛 js 集成 [英] Integrate iCheck plugin with knockout js

问题描述

有人可以帮助我将 iCheck 插件与 knockout 正确集成吗?因为我尝试使用自定义绑定将插件初始化为我的单选按钮，但它没有更新视图模型的值.

HTML

<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: { 选中: IsPrimary }"/>**<i class="fa fa-trash-o ctr-btn" style="color: red;"data-bind="点击:$parent.RemoveContactNo，可见:$index() > 0"></i>

敲除绑定

ko.bindingHandlers.RadioButton = {初始化:函数(元素，valueAccessor){//初始化icheck到元素$(元素).iCheck({radioClass: 'radio_square-blue'});$(element).on('ifChecked', function () {var observable = valueAccessor();//尝试改变可观察值observable.checked = true;});},更新:函数(元素，valueAccessor){var observable = valueAccessor();//最初触发但当我尝试更改可观察值时它没有触发//我希望这意味着值没有改变//无论如何我在提交时检查了模型，它也没有包含值.}};

解决方案

//试图改变观察值observable.checked = true;

您正在覆盖可观察对象而不是设置它；你想要

observable.checked(true);

Can somebody help me to correctly integrate iCheck plugin with knockout? because I tried to use custom binding to initialize the plugin to my radio button but it's not updating the value of the view model.

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 binding

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

解决方案

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

You're overwriting the observable rather than setting it; you want

observable.checked(true);

这篇关于将 iCheck 插件与淘汰赛 js 集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！