Question

我有一个自定义的bindingHandler，点击时效果很好。它成功地更改了数据点..但是当另一个ui控件更改数据时它不会被更新

我的html看起来像这样

<input type="checkbox" data-bind="checked: publisher.my_check"> Checkbox
<div data-bind="slidebox: {label_on: 'ON', label_off: 'OFF', data: publisher.my_check }"></div>

我的bindingHandler看起来像这样

ko.bindingHandlers.slidebox = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {


        var el = $(element),
            obj = valueAccessor();
        //add additional markup
        el.append($('<div>'));
        //set initial label
        el.find('div').text(el.hasClass('checked') ? obj.label_on : obj.label_off);
        //update the data point
        obj.data(el.hasClass('checked'));



        var updateHandler = function() {  
            console.log('i got clicked');   
            var el = $(element),
                obj = valueAccessor();
            el.toggleClass('checked').find('div').text(el.hasClass('checked') ? obj.label_on : obj.label_off);
            obj.data(el.hasClass('checked'));       

        };
        ko.utils.registerEventHandler(element, "click", updateHandler);

    },
    'update': function (element, valueAccessor) {
        console.log('i got updated');
    }
};

单击div时会更改数据点，复选框会按预期更新..但单击复选框时，我看不到“我已更新”控制台消息

Answer 1

您需要实现更新功能。当更新绑定到data-bind属性的任何observable时，将调用此方法。在这种情况下publisher.my_check

ko.bindingHandlers.slidebox = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        ...
    },
    'update': function (element, valueAccessor) {
        var config = valueAccessor(),
            checked = ko.utils.unwrapObservable(config.data),
            $element = $(element).toggleClass('checked', checked);

        $element.find('div').text(checked ? config.label_on : config .label_off);           
    }
};

修改

这是工作代码http://jsfiddle.net/madcapnmckay/xrBSQ/
的小提琴
希望这有帮助。

如何在此自定义bindingHandler中侦听数据更改？

1 个答案: