Knockout3+select2 (v4) ajax
Knockout3+select2 (v4) with ajax
我正在尝试让 select2 与 knockout 一起工作。我的数据源非常大,因此我希望它利用 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>
我无法使用 "update",因为它不会在值更改时触发。我最想要的是能够有一个 "value" 集,只要 select2 发生变化,它就会更新。
请注意,它存在于 table 中,其中创建了很多 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) => {
}
};
我正在尝试让 select2 与 knockout 一起工作。我的数据源非常大,因此我希望它利用 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>
我无法使用 "update",因为它不会在值更改时触发。我最想要的是能够有一个 "value" 集,只要 select2 发生变化,它就会更新。
请注意,它存在于 table 中,其中创建了很多 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) => {
}
};