1

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 插件无法正常工作。

例如参考这个淘汰赛链接

4

2 回答 2

3

你需要创建一个自定义绑定......为了使用 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>

而不是使用淘汰赛“检查”绑定

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
于 2014-09-26T04:41:19.880 回答
0

您需要像这样使用单选按钮绑定事件

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();
    }
};
于 2014-05-31T09:48:30.840 回答