Knockout和jQuery自动完成

Question

Knockout值绑定不适用于jquery autocomplte.如何让它工作？

我有一个模板:

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

模板渲染后我在输入上应用jQuery自动完成.绑定不起作用.看我的jsfiddle.

只有ko.applyBindings(viewModel)追求才有效$(..).autocomplete(..);

Answer 1

看起来jQuery autocomplete劫持了这个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>