привязка даты и времени в модели нокаута - PullRequest
Новая
       8

привязка даты и времени в модели нокаута

0 голосов
/ 20 сентября 2018

Я испробовал все возможности, с которыми я могу столкнуться, но средство выбора даты не запускает обновление для моей модели представления.В поисках я мог бы собрать следующее: 

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindings) {
        //initialize datepicker with some optional options
        var options = allBindings.get('options') || {
            format: 'DD MMMM YYYY',
            defaultDate: valueAccessor()()
        };

        $(element).datetimepicker(options);

       ko.utils.registerEventHandler(element, "changeDate", function (event) 
       {
           var value = valueAccessor();
           if (ko.isObservable(value)) {
              value(event.date);
           }
       });
    },
    update: function (element, valueAccessor) {
        var widget = $(element).data("DateTimePicker");
        var value = ko.unwrap(valueAccessor()); //I can see the initial value when page first load

        if (widget) {
            widget.date = value;
            if (widget.date) {
                $(element).datetimepicker({
                    date: value
                });
            }
       }
    }
};


var viewModel = ko.mapping.fromJS(data, mapping);

// continue with some tweaking

 // DateOfThing comes from c# DateTime type

 // on console window
 // ko.isObservable(viewModel.DateOfThing) // = true

  vm.DateOfThing.subscribe(function(){
    // never fires
  }

привязка: 

<input asp-for="DateOfThing" class="form-control" type="text" data-bind="datepicker: DateOfThing" />

Я вижу, как вызывается обработчик при первой загрузке страницы, но пользовательский интерфейс не обновляется.После этого я могу выбрать дату, но обновляется только пользовательский интерфейс.Я испробовал все возможности, которые могу встретить, но безуспешно.

1 Ответ

0 голосов
/ 20 сентября 2018

Из документов они уже дали раздел для создания обработчика Knockout.Попробуйте сравнить это с вашим?В частности, название события dp.change вместо changeDate. 

ko.bindingHandlers.dateTimePicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().dateTimePickerOptions || {};
        $(element).datetimepicker(options);

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                if (event.date != null && !(event.date instanceof Date)) {
                    value(event.date.toDate());
                } else {
                    value(event.date);
                }
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            var picker = $(element).data("DateTimePicker");
            if (picker) {
                picker.destroy();
            }
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        var picker = $(element).data("DateTimePicker");
        //when the view model is updated, update the widget
        if (picker) {
            var koDate = ko.utils.unwrapObservable(valueAccessor());

            //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
            koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate;

            picker.date(koDate);
        }
    }
};
...