敲除自定义绑定会导致双重事件？

Ian 发表于 Dev

伊恩

我刚刚创建了一个自定义的组合键绑定，似乎有些奇怪，我想知道是否有人可以提供帮助。我整理了一个JSFiddle来说明：

我注意到的是，我似乎每次必须两次单击切换开关才能进行切换。

在此处输入图片说明

我将其隔离到定制绑定中的以下行（JSFiddle中的第27行）：

valueAccessor()(active);

如果将这一行注释掉，那么突然间只需单击一次即可更改滑块，显然，在这种情况下，绑定会中断。

任何人都可以解释原因可能是什么，或者我如何能够解决它？

在这里

最简单的方法是从切换控件中分离出实际的点击功能，并由Knockout处理。这样，可观察值将始终与切换控制状态匹配。这是使用此方法的更新的JavaScript。我添加了一个超时，以表明当值在附加到其的click事件之外更改时，可观察对象将更新切换控件的状态。

$('.toggle').each(function () {

    var self = $(this);
    var onText = self.attr("data-on") || "ON";
    var offText = self.attr("data-off") || "OFF";

    // Go through each item individually so we can get the data-id out
 var toggle = $(this).toggles({ text: { on: onText, off: offText }, drag: false, click: false });
});
// Define the knockout custom toggle binding see
// http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.toggle = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here

        // Configure an event to update the observable when the slider is clicked
        ko.utils.registerEventHandler(element, "click", function () {
            var observable = valueAccessor();
            observable( ! observable() );
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
        // Grab the value for the item then update the toggle
        var value = ko.unwrap(valueAccessor());
        if ( true === value ) {
            $(element).trigger("toggleOn");
        }  else {
            $(element).trigger("toggleOff");
        }   
    }
};

var viewModel = {};
var settings = {};
settings.test = { value: "test", override: true };
viewModel.settings = ko.mapping.fromJS(settings);

ko.applyBindings(viewModel);

setTimeout( function() {
    viewModel.settings.test.override( false );
}, 5000 );