knockout.js - Knockout binding on first load with prettycheckable

Question

I am trying to make prettycheckable and knockout work together, I've seen there's been tackled recently but to be honest I could'nt make it work when the property on which the checkbox (or radio button) is set on first load.

So I was just trying to write a simple custom binding, but it's failing. Both if isChecked is set to true or to false on first load it misses the first change and then it "grabs" it but obviously one off the real value.

ko.bindingHandlers.prettyChecked = {
    update: function (element, valueAccessor) {
                    ko.bindingHandlers.checked.init(element, valueAccessor);
        $(element).prettyCheckable();

        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $(element).next("a").addClass('checked');
        } else {
            $(element).next("a").removeClass('checked');
        }
    }
};

$(function () {
    $('input:checkbox').prettyCheckable();

    var vm = {
        isChecked: ko.observable(false)
    };

    ko.applyBindings(vm);
});

Fiddle here

Answer 1

我修改了你的小提琴，现在它可以工作了：

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

        ko.bindingHandlers.checked.init(element, valueAccessor);
        var value = ko.utils.unwrapObservable(valueAccessor());

        $(element).prettyCheckable();
        if(value)
            $(element).next('a').click();                
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).next("input").val(value);
    }
};

还有完整的css 解决方案。

见小提琴