1

Bootstrap DateTimePickerで使用するカスタム KnockoutJS バインディングを作成しました。私が何を意味するかを示すJSFiddleは次のとおりです。

http://jsfiddle.net/dXGB3/7/

1 つの非常に重要な詳細を除いて、うまく機能します。たとえば、日付を選択した後、ユーザーは対応するテキスト ボックスから日付を削除します。「更新」メソッドは起動せず、バッキング フィールドには以前に選択された日付が含まれています。ただし、ユーザーは日付のないフォームを送信することを期待していますが、その期待は満たされていません。問題を確認するには: フィドルで、クリックして日時ピッカーを表示します。日付を選択します。次に、テキスト ボックスからテキストを消去します。日付は引き続きスパンに表示されます。

解決策の作成を開始しましたが、問題もあり、これが最善の方法であるかどうかわかりません。私の解決策:

潜在的な解決策フィドル: http://jsfiddle.net/NGwGb/1/

カスタム バインディングをラップして、値バインディングを含めます。良いニュース: ユーザーがテキストを消去すると、"value" が呼び出されるようになりました。ただし、ユーザーがフィールド内のテキストを消去する 1 つのケースで、バッキング日付オブジェクトの値を上書き (消去) したいだけです。そこで、次のコードを update メソッドに追加しました。

    if ($(element).find("input").val() == "")
        valueAccessor()(null);
    else {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).data("DateTimePicker").setValue(value);
    }

DOM の要素から値を取得するのは本当に見苦しいと思います (データバインディングの目的を無効にします)。さらに、このコードは、最初にバックエンドの日付オブジェクトからフォームにデータを入力するというシナリオを破ります。

フィールドからテキストを消去するときに、ユーザーがモデルの日付フィールドの内容を実際に消去できるようにするための最良の方法について提案をしたいと思います。

ありがとう...

-ベン

4

1 に答える 1