0

Flatpickrのノックアウト バインディングを作成しようとしていますが、うまくいきません。ここで受け入れられた回答からコードを微調整しようとしましたが、役に立ちませんでした。Flatpickr は初期化されていますが、セットアップしたデフォルトのオプションを使用していないようで、バインディングの更新部分がまったく機能しません。

私のコードは以下です。私はjsFiddleを作成しますが、ここでは仕事でブロックされています..

ko.bindingHandlers.datetimepicker = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datetimepickerOptions || { dateFormat: 'm-d-Y', enableTime: true };
    var $el = $(element);

    $(element).flatpickr(options);

    //handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "onChange", function () {
      var observable = valueAccessor();
      observable($el.val());
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });

    $el.val(new Date(ko.utils.unwrapObservable(valueAccessor())));
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var $el = $(element);

    // handle json date from microsoft
    if (String(value).indexOf('/Date(') == 0) {
      value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
    }

    var current = new Date($el.val());

    if (value - current !== 0) {
      $el.flatpickr('setDate', value);
    }
  }
};

編集

私の状況についてもう少し情報を。上部にページャー ボタンがあるページがあり、これらのボタンはビューモデルの配列を循環します。ページをめくるたびに、displayedRecord プロパティが配列内の次/前の項目に設定され、すべての編集フィールドがdisplayedRecord プロパティにバインドされます。これは、@atitsbest から提供された datetimepicker バインディングを使用するものを除くすべての入力に対して正常に機能します。

datetimepicker フィールドは初めて入力されますが、一度ページを通過すると、そのレコードのビューモデル プロパティが何らかの形で null に設定されます。

編集2

これがついに機能しました。これが最終製品です。オブザーバブルをnullに設定しようとするとエラーが発生したため、init関数でサブスクライブを削除することになりました。また、ユーザーがクリア、トグルなどのための独自のボタンを提供するための flatpickr ラップ機能も追加されました。

ko.bindingHandlers.flatpickr = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
      dateFormat: 'm/d/Y H:i',
      enableTime: true,
      time_24hr: true,
      minuteIncrement: 1
    }, allBindingsAccessor().flatpickrOptions);
    var $el = $(element);
    var picker;

    if (options.wrap) {
      picker = new Flatpickr(element.parentNode, options);
    } else {
      picker = new Flatpickr(element, options);
    }

    // Save instance for update method.
    $el.data('datetimepickr_inst', picker);

    // handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function () {
      valueAccessor()(picker.parseDate($el.val()));
    });

    // handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
    // Get datepickr instance.
    var picker = $(element).data('datetimepickr_inst');

    picker.setDate(ko.unwrap(valueAccessor()));
  }
};
4

1 に答える 1

1

jsfiddleを作成し、 バインディングにいくつかの変更を加えました。

  • イベント名を「onChange」から「change」に変更。今、それは発火します。
  • カスタムオプションが設定されている場合でも、いくつかのデフォルトオプションを作成しました。デフォルトのdateFormatに役立ちます。
  • 「update」関数をサブスクライブに置き換えて、オブザーバブルを更新しました。
  • バインドされた値は常に日付になります。

新しいバインディング:

ko.bindingHandlers.datetimepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
        dateFormat: 'm-d-Y H:i',
        enableTime: true
      }, allBindingsAccessor().datetimepickerOptions),
      $el = $(element),
      picker = new Flatpickr(element, options),
      observable = valueAccessor();

    //handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function() {
      observable(picker.parseDate($el.val()));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $el.flatpickr("destroy");
    });

    observable.subscribe(function(newVal) {
      $el.val(picker.formatDate(options.dateFormat, newVal));
    });

    picker.setDate(ko.unwrap(observable));
  }
};

それが役立つことを願っています。

アップデート

ページングに対処するために、バインディングを変更しました。これは、ページング シナリオでバインディングをテストするための更新されたjsfiddleです。そして、ここに新しいバインディングコードがあります:

ko.bindingHandlers.datetimepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({
          dateFormat: 'm-d-Y H:i',
          enableTime: true
        },
        allBindingsAccessor().datetimepickerOptions),
      $el = $(element),
      picker = new Flatpickr(element, options);

    // Save instance for update method.
    $el.data('datetimepickr_inst', picker);

    // handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function() {
      valueAccessor()(picker.parseDate($el.val()));
    });

    // handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $el.flatpickr("destroy");
    });

    // Update datepicker with new value from observable
    valueAccessor().subscribe(newVal => $el.val(picker.formatDate(options.dateFormat, newVal)));
  },
  update: function(element, valueAccessor, allBindingsAccessor) {
    // Get datepickr instance.
    var picker = $(element).data('datetimepickr_inst');

    picker.setDate(ko.unwrap(valueAccessor()));
  }
};

それが役立つことを願っています。

于 2017-01-12T08:13:22.033 に答える