jQuery 旋转器和 knockout

Question

如何将 jQuery UI 旋转小部件与 Knockout 结合起来？这个answer不再有效，因为没有 spinchange 事件。这是我的 HTML:

<input id='spinner' data-bind='value:theValue' />
<span data-bind='text:theValue'></span>

还有我的 JS:

$(function() {
    $('#spinner').spinner();

    var viewModel = {
        theValue: ko.observable(3)
    };

    ko.applyBindings(viewModel);
});

你可以在 jsFiddle 中尝试这个。如您所见，使用微调器按钮不会更改 span 内的文本。使用键盘输入数字，然后将焦点放在页面上的其他位置将更改文本(因此绑定(bind)有效)。

因为我使用的是 ASP.NET，并且将此微调器小部件封装在 WebControl 中，所以它可能与此有关。我不能采用与上述答案相同的方法，因为我们并不是在每个页面上都使用 Knockout。

但是如果我能让 jsFiddle 工作，那可能会进一步帮助我，甚至只是解决方案。

Answer 1

咳咳，不用再看了。显然，答案是正确的。我相信问题出在 ko.utils.registerEventHandler 上。当我将代码更改为:

时它就起作用了

ko.bindingHandlers.spinnerValue = {
    init: function (element, valueAccessor) {
        //handle the field changing
        $(element).on('spinstop', function () {
            var observable = valueAccessor();
            observable($(element).spinner("value"));
        });
    },

    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        current = $(element).spinner("value");
        if (value !== current) {
            $(element).spinner("value", value);
        }
    }
};

所以我使用 jQuery 和 on 函数。 spinstop 事件确实存在(spinchange 也是如此)。我一直在查看代码并只是搜索字符串。我猜 jQuery 代码的做法有点不同。

无论如何，这个自定义处理程序可以工作，即使使用我们的 ASP.NET WebControl。对于旧版本的微调器(我们之前使用的是 1.20)，正常的 KO 数据绑定(bind)可以工作。