javascript - ICheck 插件在 knockout js 检查绑定(bind)中不起作用

Question

HTML

<div class="col-xs-4">
    <div class="form-group">
        <label>
            <input type="radio" name="r1" 
                   data-bind="checked: EmployeeTypeChecked" 
                   value="FT" class="minimal" />
            Full Time Employee
        </label>
        <label>
            <input type="radio" name="r1" value="DE" 
                   data-bind="checked: EmployeeTypeChecked" class="minimal" />
            Daily Wages
        </label>
        <label>
            <input type="radio" name="r1" value="OD" 
                   data-bind="checked: EmployeeTypeChecked" class="minimal" />
            On demand
        </label>
    </div>
</div>

knockout 代码

window.employeeApp = {};

window.employeeApp.DataContext = {

    createEmployee: function (data) { 
        return new employeeApp.DataContext.EmployeeModel(data); 
    },

    EmployeeModel: function (data) {
        data = data || {};
        var self = this;

        self.EmployeeTypeChecked = ko.observable(false),

        self.toJs = function () {
            return ko.toJS(self);
        };

        self.toJson = function () {
            return ko.toJSON(self);
        };
    }
}

window.employeeApp.ViewModel = function () {
    var selectedEmploeyee = ko.observable(),

    init = function () {
        selectedEmploeyee(employeeApp.DataContext.createEmployee());
    };

    return {
        init: init,
        selectedEmploeyee: selectedEmploeyee,
   };
}();

ko.applyBindings(employeeApp.ViewModel, $('.page_script')[0]);

employeeApp.ViewModel.init();

如果我删除 iCheck 插件样式，它会起作用；使用 iCheck 插件它不起作用 正确。

例如引用this knockout link

Answer 1

您需要创建一个自定义绑定(bind)...以便使用 iCheck 插件..与 knockout..

ko.bindingHandlers.yourBindingName= {
    init: function (element, valueAccessor) {
        $(element).iCheck({
            checkboxClass: 'icheckbox_minimal-grey',
            increaseArea: '10%'
        });

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

你可以像这样使用它..

<p>Send me spam: <input type="checkbox" data-bind="yourBindingName: wantsSpam" /></p>

而不是使用 knockout “检查”绑定(bind)

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>