2013-07-16 6 views
10

녹아웃 값 바인딩은 jquery 자동 완성과 작동하지 않습니다. 어떻게 작동 시키는가?녹아웃 및 jQuery 자동 완성

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

템플릿 렌더링 후 내가 입력에 jQuery를 자동 완성을 적용하고있다 :

나는 템플릿을 가지고있다. 바인딩이 작동하지 않습니다. 내 jsfiddle을 참조하십시오.

그것은 $(..).autocomplete(..);

+0

확실히 당신을 위해 대답을 얻었다. 흥미로운 질문 –

답변

17

그것은 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>

+6

당신은 슈퍼맨입니다! 고맙습니다! – Andrei

+0

감사합니다. * 그래서 * 사용자 정의 바인딩 방식보다 훨씬 쉽습니다. –