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>

淘汰代码

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

你需要创建一个自定义绑定...才能使用iCheck插件..与淘汰..

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>

而不是使用淘汰赛＆＃34;检查＆＃34;结合

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

Answer 2

您需要将事件与此单选按钮绑定

ko.bindingHandlers.RadioButton = {
    init: function (element, valueAccessor) {

        $(element).iCheck({
            radioClass: 'Class Name'
        });

        $(element).on('ifChecked', function () {
            var observable = valueAccessor();
            observable.checked(true);

        });
    },
    update: function (element, valueAccessor) {
        var observable = valueAccessor();
    }
};

ICheck插件无法在knockout js中检查绑定

2 个答案: