knockout.js 自定义绑定回调在更新非依赖可观察对象后执行答案

【问题标题】：knockout.js custom binding callback executes after a non-dependent observable is updatedknockout.js 自定义绑定回调在更新非依赖可观察对象后执行
【发布时间】：2020-07-27 02:25:49
【问题描述】：

我有一个奇怪的问题，如果我通过自定义绑定 updateQuantity 上的回调 updateQuantity 更新我的 quantity observable，它会在我的自定义绑定上调用我的 update 函数。我的带有自定义绑定的元素没有，或者不应该有任何类型的订阅，但它会再次执行。这会调用我的回调方法两次。我在那里错过了什么吗？如果我的updateQuantity 只有一个return true，那么它不会调用update 函数。此外，如果我在custom binding 的update 方法中删除values.callback($element.is(':checked') || checked);，它也可以工作。就像那条线导致订阅或其他东西。

<input type="checkbox" data-bind="checkbox: { text: 'Hello', callback: updateQuantity.bind($data) }" />

回调方法

 self.quantity = ko.observable(0);

self.updateQuantity = function (checked) {
            var quantity = self.quantity();
            if (checked)
                self.quantity(quantity + 1);
            else if ((quantity - 1) >= 0) {
                self.quantity(quantity - 1);
            }
            return false;
        };

自定义绑定

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

            var values = valueAccessor();
            var checked = ko.utils.unwrapObservable(values.checked);
            var css = ko.utils.unwrapObservable(values.css);
            var $element = $(element);

            var button = $('<button type="button" class="btn btn-check ' + (values.buttonClass || '') + '" data-toggle="buttons-checkbox"><i class="' + (values.iconClass || 'icon-ok') + '"></i> ' + (values.text || '') + '</button>');

            button.click(function (evt, data) {

                if (typeof (values.callback) != 'undefined') {
                    values.callback($(element).is(':checked') || checked);
                }

                return true;
            });

            button.insertBefore(element);
        },
        update: function(element, valueAccessor, allBindingsAccessor) {

            var values = valueAccessor();
            var checked = ko.utils.unwrapObservable(values.checked);

            if (typeof(values.callback) != 'undefined') {
                values.callback($(element).is(':checked') || checked);
            }
        }
    };

【问题讨论】：

标签： javascript knockout.js dom-events

【解决方案1】：

我在独立的回调方法中使用了 .peek() 并且它有效。仍然不确定为什么它会在定期检索时重新评估自定义绑定。

 var quantity = self.quantity.peek();

【讨论】：