2

如何将 jQuery UI 微调器小部件与 Knockout 结合使用？这个答案不再有效，因为没有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 工作，那可能会进一步帮助我，甚至只是解决方案。

4

1 回答 1

2

咳咳，不用再看下去了。显然，答案几乎是正确的。问题在于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 数据绑定工作。

于 2013-09-04T14:34:40.453 回答