0

日付をフォーマットできる次の 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());
});

この実装の問題は、updateキーが押されるたびに bindingHandlers がトリガーされることです。これにより、多くの場合、無効な日付が発生します。例: ユーザーは入力フィールドに新しい日付を一度に 1 桁ずつ入力します。数字ごとに更新がトリガーされ、入力の新しい内容が正しく解釈されません。

私もこれを試します：

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

この実装では、問題はupdatebindingHandlers でトリガーされますが、オブザーバブルの背後で現在の値を再利用することです。これは既に入力の値であるため、変更は検出されません。

私も使用しようとしましたvalueHasMutatedが、依存するObservableにはこのメソッドがないため、常にエラーが発生しました。

私の目標はSave changes、ユーザーが日付を変更し始めるたびにボタンを表示することですが、実際には入力フィールドの日付を更新するのは、ユーザーがフォーカスを離れたとき (変更イベント) だけです。

4

1 に答える 1

0

このvalueUpdateオプションはバインディングにのみ適用されるためvalue、この場合は役に立ちません。

イベントと、またはchangeのような別のイベントの両方を処理したい場合があります。keyupkeydown

また、update関数呼び出しvalueAccessor()では、保持している値ではなく、オブザーバブルが返されます。結果を関数として呼び出すか、ko.utils.unwrapObservableオブザーバブルと非オブザーバブルの両方の値を安全に返すユーティリティを使用する必要があります。オブザーバブルのラップを解除すると依存関係も作成されるため、値をプログラムで更新すると、update関数が再度トリガーされて値が更新されます。

于 2013-04-27T17:58:14.813 に答える