Как обновить нокаут ViewModel при использовании пользовательского привязки

Question

Я пытаюсь подключить спинбокс (ввод с кнопками увеличения и уменьшения) к KO, но у меня возникают некоторые проблемы с тем, чтобы убедиться, что мой ViewModel обновляется правильно, когда пользователь взаимодействует с элементом управления.

Конкретное управление я использую со счётчиком Fuel UX по: http://getfuelux.com/javascript.html#spinbox

Самих данные связывания, присоединен к оберточному DIV, поскольку это является контейнером для всего элемента управления:

<div id="daysToComplete-spinner" data-initialize="spinbox" class="spinbox input-group" style="width: 150px;" data-bind="spinbox: daysToComplete, spinboxOptions: {min: 0, max: 180 }"> 
    <input class="form-control spinbox-input" placeholder="Days"> 
    <div class="spinbox-buttons input-group-btn"> 
     <button type="button" class="btn btn-cancel spinbox-up"> 
      <span class="fa fa-angle-up"></span><span class="sr-only">Increase</span> 
     </button> 
     <button type="button" class="btn btn-cancel spinbox-down"> 
      <span class="fa fa-angle-down"></span><span class="sr-only">Decrease</span> 
     </button> 
    </div> 
</div> 

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

• Я хочу зарегистрировать обработчик событий. Когда пользователь нажимает кнопку «вверх» или «вниз» (промежутки), мне нужно убедиться, что свойство ViewModel обновлено новым значением. Я попытался использовать valueAccessor(), но он дает мне значение, а не свойство наблюдаемого, которое я ожидал (после прочтения документов на сайте ko).
• Я хочу, чтобы убедиться, что, если пользователь вводит число в поле ввода, свойство ViewModel обновляется. Связывание данных находится в div, поэтому я предполагаю, что нокаут не «знает», что вход внутри div изменился ... как это сделать? Тот же обработчик событий?

Вот что у меня до сих пор на моем обработчике:

$(function() { 
    ko.bindingHandlers.spinbox = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

      var options = allBindingsAccessor().spinboxOptions || {}; 

      $(element).spinbox(options); 

      var value = ko.utils.unwrapObservable(valueAccessor()); 

      if (value) { 
       $(element).spinbox("value", value); 
      } 

      ko.utils.registerEventHandler(element, "changed.fu.spinbox", function (event, value) { 
       var modelValue = valueAccessor(), 
       modelValue(value); //it crashes here "not a function" 

      }); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).spinbox("value", value); 

      console.log(value); 
     } 
    }; 
}); 

Любое руководство относительно того, что я пропускаю будут оценены.

Answer 1

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

Если в какой-то момент вы сделали что-то вроде этого:

viewmodel.daysToComplete = 4

Тогда daysToComplete свойство не является наблюдаемой больше. В результате valueAccessor() не будет возвращать наблюдаемое, а 4 - то, что вы, кажется, описываете.