Нокаут и автозаполнение jQuery

Связывание с нокаутом не работает с автозагрузкой jquery. Как заставить его работать?

У меня есть шаблон:

<input 
   type="text" 
   class="autocomplete" 
   data-bind="value: viewModelObservableValue"
   name="MyValue" />

После преобразования шаблона я применяю автозаполнение jQuery на входе. Связывание не работает. См. Мой jsfiddle.

Работает, только если ko.applyBindings(viewModel) идет после $(..).autocomplete(..);

Ответы

Ответ 1

Похоже, что автозаполнение jQuery захватило событие change. Вот почему это не работает.

Чтобы исправить это, вам нужно установить свойство valueUpdate в blur. Конечно, это не будет вызывать после выбора элемента, вам сначала придется размыть.

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Scheme"
    ];
    $(".autocomplete").autocomplete({
      source: availableTags
    });
 });

var viewModel = {
    myValue: ko.observable()
};

ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<input type="text" class="autocomplete" data-bind="value: myValue, valueUpdate:'blur' " />

<div data-bind="text: myValue"></div>