bindingHandlers中的还原更改2次无效

Question

我正在开发一个自定义bindingHandlers，用于在输入框中显示/编辑日期。每当用户键入无效日期时，我想清除输入框。

注意:键入日期的输入框是可观察的(从微风中查询)。

以下是我的实际实现：

ko.bindingHandlers.dateRW = {
    //dateRW --> the 'read-write' version used both for displaying & updating dates
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor();            
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var value = $(element).val();
            var dateFormatted = moment.utc(value, "DD/MM/YYYY");
            if (dateFormatted!=null && dateFormatted.isValid())
                observable(dateFormatted.toDate())
            else {
                observable(null);
            }
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var date = (typeof value !== 'undefined') ? moment.utc(value) : null;
        var dateFormatted = (date != null) ? date.format('DD/MM/YYYY') : '';
        $(element).val(dateFormatted);            
    }
};

工作良好的例子：

• 用户正在键入25/12/2013 >>日期有效
• 接下来，用户键入1234 >>日期无效>>输入框被清除。
• 接下来，用户键入01/04/2013 >>日期有效

不起作用的例子：

• 用户正在键入1234 >>日期无效，>>输入框被清除。
• 接下来，用户正在键入5678 >>日期是(再次！)无效的>>输入框不再被清除！！

输入框不再被清除的原因是，在上一步中，可观测值已经设置为null，而且我们知道，如果可观察到的值没有更改，就不会触发更新。

我发现的解决方法如下所示:强制双重连续更新(未定义+ null)。

ko.bindingHandlers.dateRW = {
    //dateRW --> the 'read-write' version used both for displaying & updating dates
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor();            
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var value = $(element).val();
            var dateFormatted = moment.utc(value, "DD/MM/YYYY");
            if (dateFormatted!=null && dateFormatted.isValid())
                observable(dateFormatted.toDate())
            else {
                observable(undefined);                    
                observable(null);
            }
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var date = (typeof value !== 'undefined') ? moment.utc(value) : null;
        var dateFormatted = (date != null) ? date.format('DD/MM/YYYY') : '';
        $(element).val(dateFormatted);            
    }
};

我不喜欢这样继续下去。也许还有更好的方法？

谢谢。

Answer 1

我认为您正在寻找的是valueHasMutated函数，它可能会被调用到一个可观察的位置，以强制它用最新的值更新它的订阅者。在您的示例中，您可以替换：

observable(undefined);                    
observable(null);

通过以下方式：

observable.valueHasMutated();

或者：

observable.notifySubscribers(null);