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内的文本。使用键盘输入数字然后将焦点放在页面的其他位置将更改文本（因此绑定有效）。

因为我正在使用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数据绑定工作。

jQuery微调器和Knockout

1 个答案: