自定义bindingHandlers没有触发输入元素的“值更改”。

Question

我有以下bindingHandlers，它允许我格式化我的日期：

ko.bindingHandlers.dateRW = {
    //dateRW --> the 'read-write' version used both for displaying & updating dates
    init: function (element, valueAccessor, allBindingsAccessor) {
        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var myDate = moment($(element).val(), "DD/MM/YYYY");
            observable(myDate.toDate());
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();  // 'Mon Sep 10 2012 02:00:00 GMT+0200 (Paris, Madrid (heure d’été))'; 
        var date = (typeof value() !== 'undefined') ? moment(value()) : null;
        var dateFormatted = (date != null) ? date.format('DD/MM/YYYY') : '';
        $(element).val(dateFormatted);
    }
};

使用实例：

<input type="text" data-bind="dateRW: myDate" />

它可以工作，但是每当我编辑输入元素时，我都需要单击元素的外部(失去焦点)来触发value change。我已经试过valueUpdate: 'afterkeydown'了，但它不起作用。我知道valueHasMutated存在，但我不知道是否必须这样做。

谢谢。

更新

正如建议的那样，我尝试使用keyup事件。我提醒您，我的唯一目标是“模拟”这个值在keyup事件中发生了变化。

ko.utils.registerEventHandler(element, "keyup", function () {
    observable($(element).val());
});

有了这个实现，问题是bindingHandlers上的每个按键都会被触发。这通常会导致无效日期。用户将在输入字段中一次输入一位数的新日期。对于每一个数字，更新都会被触发，并且输入的新内容会被错误地解释。

我也试过这样做：

ko.utils.registerEventHandler(element, "keyup", function () {
    observable.notifySubscribers($(element).val());
});

使用此实现，问题在于bindingHandlers上的bindingHandlers将被触发，但重用可观察到的后面的当前值，而且由于这已经是输入中的值，因此不会检测到任何更改。

我也尝试使用valueHasMutated，但是我总是得到一个错误，因为我的dependantObservable没有这个方法。

我的目标是每当用户开始更改日期时显示我的Save changes 按钮，但只有当他离开focus (更改事件)时才真正更新输入字段中的日期。

Answer 1

valueUpdate选项仅适用于value绑定，因此在这种情况下不会对您有所帮助。

您可能希望同时处理change事件和另一个事件，如keyup或keydown。

而且，在您的update函数中，调用valueAccessor()会返回您的可观察值，而不是它所包含的值。您可能希望将结果作为函数调用，或者使用ko.utils.unwrapObservable实用程序来安全地返回可观测值和不可观测值。展开可观察性还将创建一个依赖项，因此对该值的编程更新将再次触发update函数以更新您的值。