0
次のjquery-uiオートコンプリートリストを表示するカスタムバインドハンドラを作成しました。要素を選択した後、私はoptions.valueによって与えられた与えられた観測可能な値を変更したいが、select関数が入ったときは変更はない。 1カスタムハンドラ内で観測可能なモデルを変更する
ko.bindingHandlers.autocomplete = {
init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
$(element).autocomplete(
{
minLength : 2,
autoFocus : true,
source : function(request, response) {
$.ajax({
url : options.source,
data : {
term : request.term
},
dataType : "json",
type : "GET",
success : function(data) {
response(data);
}
});
},
select : function(event, ui) {
var selectedItem = ui.item;
options.value(selectedItem.name);
}
});
}
};
<input data-bind="autocomplete: {
value: myView().parent_name,
source: '/data/autocomplete'
}"
type="text" class="form-control">
編集は私がコメントから結合を試みたが、私はまだ問題があります。
model.autocomplete = function(searchTerm, callback){
$.ajax({
type : "GET",
url : "/data/autocomplete",
data: {term: searchTerm}
}).done(callback);
};
入力は次のようになります。
<input data-bind="jqAuto: {
value: myView().parent_name,
source: myView().autocomplete,
labelProp: 'name',
valueProp: 'parent_name'
}"
type="text" class="form-control">
これはMYVIEWを（）は変更されません
編集2
をPARENT_NAME私は今いただきました！問題を知っていると思います。
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<h1>Testpage</h1>
<input data-bind="jqAuto : {
source: sub().autocomplete,
value: sub().id,
labelProp: 'name',
valueProp: 'id'
}"></input>
<button data-bind="click: sub().output">ok</button>
<button data-bind="click: reset">reset</button>
<script>
function getData() {
var data = [
{
name: "Test1",
id: 1
},
{
name: "Test2",
id: 2
},{
name: "Test3",
id: 3
}
];
return data;
}
function Submodel() {
var self = this;
self.name = ko.observable("");
self.id = ko.observable(null);
self.autocomplete = function(searchTerm, callback) {
callback(getData());
};
self.output = function(){
alert(self.id());
};
}
function PageModel() {
var self = this;
self.sub = ko.observable(new Submodel());
self.reset = function(){
self.sub(new Submodel());
};
}
ko.applyBindings(new PageModel());
</script>
</body>
</html>
いくつかの点でクリアが、これは結合無効に思われるサブモデルがあります：私はこの1つのようにはるかに簡単なテストファイルを作りました。私がリセットボタンを押すまで、すべて正常に動作します。リセット後にバインディングを更新する方法はありますか？ダイアログのバインディングを使わずに、すべての変数を手作業でクリーニングせずに、モデルでダイアログを使いたいので、このリセットが必要です。
あなたが車輪の再発明していないことを確認してください：https://github.com/rniemeyer/knockout-jqAutocomplete – user3297291
今、あなたが結合jqAutocompleteを試したこと：私たちを見ます'myView' viewmodelと' parent_name'と 'name'は何ですか？ – user3297291
myModel（）が唯一定義しているのは、現時点ではparent_name = ko.observable（null）です。私はjqAutoのコードを調べましたが、これはparent_nameの代わりにjsonノード全体に適用されると思われます – Gustavo