我正试图让select2与淘汰赛合作。我的数据源非常大,因此我希望它能够利用AJAX。当我不使用AJAX时,我的代码工作正常。
ko.bindingHandlers.select2 = {
init: (element, valueAccessor, allBindings) => {
$(element).select2({
// allowClear: false,
ajax: {
url: '/api/person-catalog',
data: (params) => {
return {
name: params.term
};
},
dataType: 'json',
delay: 250,
processResults: (data, params) => {
$.each(data, (key, val) => {
data[key].text = val.nameDA;
});
return {
results: data
};
},
cache: true
},
placeholder: 'Enter name',
escapeMarkup: function (markup) {
return markup;
} // , // let our custom formatter work
//minimumInputLength: 1,
//templateResult: formatRepo,
// templateSelection: formatRepoSelection
});
// hacky solution
$(element).on('change', evt => {
if ($(element).select2('data')[0] !== null && parseInt($(element).select2('data')[0]['id']) > 0){
const item = $(element).select2('data')[0];
allBindings().value(item['name']);
}
});
},
update: (el, valueAccessor, allBindingsAccessor, viewModel) => {
const allBindings = allBindingsAccessor();
$(el).trigger("change");
$(el).val(allBindings.value()).trigger('change');
console.log($(el).val());
}
};
和HTML:
<select data-bind="value: chosenValue, select2"></select>
我无法使用“更新”,因为当值更改时不会触发它。我最理想的是能够设置一个“值”集,只要更改select2就会更新。
请注意,它存在于一个表中,其中创建了许多select2实例。替代解决方案也非常受欢迎。
问候
我发现在这方面弄乱价值绑定并不是一个好主意。相反,我使用另一个绑定(例如名称)并删除更新中的所有内容。结果如下:
ko.bindingHandlers.select2 = {
init: (element, valueAccessor, allBindings) => {
$(element).select2({
ajax: {
url: '/api/person-catalog',
data: (params) => {
return {
name: params.term
};
},
dataType: 'json',
delay: 250,
processResults: (data, params) => {
$.each(data, (key, val) => {
data[key].text = val.name;
});
return {
results: data
};
},
cache: true
}
});
$(element).on('change', evt => {
if ($(element).select2('data')[0] !== null && parseInt($(element).select2('data')[0]['id']) > 0){
const item = $(element).select2('data')[0];
allBindings().name(item['name']);
}
});
},
update: (el, valueAccessor, allBindingsAccessor, viewModel) => {
}
};