ノックアウトとjQueryオートコンプリート

Question

ノックアウト値バインディングはjqueryオートコンプリートでは機能しません。それを働かせるには？

私はテンプレートを持っている：

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

テンプレートのレンダリング後、私は入力にjQueryのオートコンプリートを適用しています。バインディングは機能しません。私のjsfiddleを参照してください。

それは$(..).autocomplete(..);

Answer 1

これは、jQueryのオートコンプリートのように見えますがchangeイベントをハイジャックした後ko.applyBindings(viewModel)が行く場合にのみ機能します。なぜそれは動作しません。

これを修正するには、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>