Привязка нокаута TempusDominus не запускает событие обновления после инициализации - PullRequest
Новая
       32

Привязка нокаута TempusDominus не запускает событие обновления после инициализации

1 голос
/ 03 июня 2019

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

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    //initialize datepicker with some optional options
    var options = allBindings().datepickerOptions || {
      format: 'MM/DD/YYYY HH:mm',
      defaultDate: valueAccessor()()
    };
    $(element).datetimepicker(options);

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "change.datetimepicker", function(event) {
      var value = valueAccessor();
      if (ko.isObservable(value)) {
        value(event.date);
      }
      console.log("change.datetimepicker"); //, event.date.format());
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var val = ko.utils.unwrapObservable(valueAccessor());
    if ($(element).datetimepicker) {
      $(element).datetimepicker("date", val);
    }
    console.log("update called"); //, $(element).datetimepicker("date").format());
  }
};

var viewModel = {};

function QuoteViewModel(data) {
  var self = this;
  self.dt2 = ko.observable(moment());
};

viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);

/*
$("#datetimepicker1").on("change.datetimepicker", function (e) {
  console.log("on change", e.date.format());
});
*/








  
    
      
      
        
 СЦЕНАРИЙ 





https://jsfiddle.net/mh_surge/7yrze0Lv/6/



 Если я раскомментирую код внизу, который добавляет обработчик события изменения не-ko, он всегда срабатывает, как и ожидалось. Это наводит меня на мысль, что может быть проблема с ko.utils.registerEventHandler, но исходный код этой функции выглядит нормально. 



 Почему событие обновления и изменения срабатывает только один раз во время инициализации, и как мне это исправить? 












 



 

 





 




 





1 Ответ












2 голосов 























 / 

03 июня 2019












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



 В коде выбивания вы используете аргумент element, переданный init и update. Это относится к элементу, который имеет datepicker привязку данных. 



 В коде jQuery вы нацеливаетесь на $("#datetimepicker1"), то есть <div>, в котором есть пользовательский элемент change, реализованный плагином. 



 Чтобы это исправить, вам нужно: 



    

  •  Поместите привязку datepicker на элемент с идентификатором datetimepicker1 (т.е. , а не  на элементе input) 
    • 

  •  Используйте синтаксис $(element).on("change.datepicker", ...) в функции init 
    • 

  •  Добавить  обратный вызов утилизации элемента  для очистки экземпляра виджета в случае, если нокаут удаляет элемент из DOM 
    • 








 
 

 





 

 



 


 

 

 


...