Привязка нокаута mvvm с помощью metro.js datepicker

Question

Я пытался взломать мой путь с помощью metro.js datepicker и нокаутом. Пока что мой код привязки для DatePicker выглядит так:

ko.bindingHandlers.datepicker = {
  init: function(el, va, ba, model, ctx) {
    var prop = va();
    $(el).datepicker({
      onSelect: function(txt, date) {
        prop(date);
      }
    });
  },
  update: function(el, va, ba, model, ctx) {
    var prop = va();
    var date = ko.unwrap(prop);

    if(date) {
      applyDate(date);
    }

    function applyDate(dt) {
      var j = $(el);
      var dp = j.data('datepicker');
      var inp = j.find('input');
      var fmt = dp.options.format;
      var sDate = format(fmt, dt);
      // dp._calendar.calendar.dayClick(sDate, dt);
      // inp.value = sDate;
      dp._calendar.calendar('setDate', sDate);
      j.find('input').val(dp._calendar.calendar('getDate')).trigger('change', sDate);
    }

    function format(fmt, dt) {
      fmt = fmt.replace('yyyy', dt.getFullYear());
      fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
      fmt = fmt.replace('dd', pad(dt.getDate()));
      return fmt;
    }

    function pad(n) {
      return parseInt(n) < 10 ? '0' + n: '' + n;
    };
  }
}

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

JSBin: http://jsbin.com/rupaqolexa/1/edit?html,js,output

Обновление: появилась еще одна проблема... она не работает в IE 10+. Дата выглядит как NaN в пользовательском интерфейсе...

Обновление: Шаги для воспроизведения

1. введите дату 2-е текстовое поле: 2013/05/13 и нажмите кнопку Изменить. Наблюдать за датой обновляется в текстовом поле datepicker. Это работает как ожидалось. (Кроме как в IE).
2. введите другую дату в текстовое поле и нажмите кнопку изменения. Заметьте, что дата не обновляется в текстовом поле выбора даты. Здесь ожидается, что текстовое поле DatePicker будет обновлено с последним значением.

Answer 1

В update часть вашей пользовательской привязки, вам нужно внести все изменения в связанные элементы, включая виджет календаря и связанные с ним input элемент.

Я изменил код, чтобы он теперь работал.

function ViewModel(date) {
  var model = this;
  model.date = ko.observable(date);
  model.set = function() {
    var val = $('#somedate').val();
    var dt = new Date(val);
    model.date(dt);
  };
}

ko.bindingHandlers.datepicker = {
  init: function(el, va, ba, model, ctx) {
    var prop = va();
    $(el).datepicker({
      onSelect: function(txt, date) {
        prop(date);
      }
    });
  },
  update: function(el, va, ba, model, ctx) {
    var newDate = ko.unwrap(va());

    if(newDate) {
      var $el = $(el);
      var datePicker = $el.data('datepicker');
      var $input = $el.find('input');
      var formattedDate = format(datePicker.options.format, newDate);
      datePicker._calendar.calendar('setDate', formattedDate);
      $input.val(formattedDate);
      //$input.val(dp._calendar.calendar('getDate'))
      //  .trigger('change', sDate);
    }

    function format(fmt, dt) {
      fmt = fmt.replace('yyyy', dt.getFullYear());
      fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
      fmt = fmt.replace('dd', pad(dt.getDate()));
      return fmt;
    }

    function pad(n) {
      return parseInt(n) < 10 ? '0' + n: '' + n;
    }
  }
};

var m = new ViewModel();

$(function(){
  ko.applyBindings(m);
});

<link href="//metroui.org.ua/css/metro.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-icons.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-responsive.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/metro-schemes.css" rel="stylesheet">

<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>

<div>
  <div class="input-control text" data-bind="datepicker: date">
    <input type="text">
    <button class="button"><span class="mif-calendar"></span></button>
  </div>
</div>
<div>
  <label>Date</label>
  <div class="input-control text">
    <input type="text" id="somedate"/>
  </div>
  <input type="button" class="button" value="Change" data-bind="click: set"/>
</div>

<div>
  <code data-bind="text: date"></code>
</div>

Тем не менее, есть еще небольшой сбой: календарь datepiceker setdate Добавьте новую выбранную дату вместо замены выбранных. Пожалуйста, обратитесь к документации API, чтобы решить эту проблему самостоятельно.