没有被KnockoutJS捕获的jQueryUI数据报变事件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

我试图在jQueryUI中使用KnockoutJS。我有一个带有数据报警器的输入元素。我现在在跑步knockout.debug.1.2.1.js而且似乎改变事件从来没有被诺克所捕捉到。元素如下所示:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

我甚至试过改变valueUpdate事件类型,但无效。似乎Chrome会导致focus事件在它更改值之前发生,但IE不更改。

有什么“重新绑定所有绑定”的“剔除”方法吗?从技术上讲,我只需要在将值发送回服务器之前更改它。这样我就能接受这种解决办法了。

我认为问题是数据报童的错,但我想不出如何解决这个问题。

有什么想法吗?

提问于
用户回答回答于

我认为对于jQueryUIDatepicker来说,最好使用自定义绑定,它将使用Datepicker提供的API来读取/写入日期对象。

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

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

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

你会把它当作:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

用户回答回答于

下面是RP Niemeyer的答案的一个版本,它将与这里找到的剔除验证脚本一起工作

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
            if (observable.isValid()) {
                observable($(element).datepicker("getDate"));

                $(element).blur();
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

        ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);

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

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

更改是对更改事件处理程序传递输入的值,而不是首先将日期传递给验证脚本,然后只将日期设置为可观察的有效日期。我还添加了这里讨论的定制绑定所需的validationCore.init:

扫码关注云+社区