在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 >>日期无效>>（又来了！）输入框不再清除！

输入框不再被清除的原因是因为在上一步中observable已经设置为null，并且我们知道如果observable没有更改其值，则不会更新已激活的值。

我发现的解决方法如下：强制连续两次更新（undefined + 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上调用它来强制它用最新值更新它的用户。在你的榜样，你可以再更换：

observable(undefined);      
observable(null); 

有：

observable.valueHasMutated(); 

或：

observable.notifySubscribers(null);