Knockout3 + select2(v4)with ajax

时间:2018-02-21 21:49:05

标签: knockout.js jquery-select2 knockout-3.0

我试图让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>

我无法使用&#34;更新&#34;因为当值改变时不会触发它。我最想要的是能够拥有&#34;价值&#34;每当更改select2时更新的设置。

请注意,它存在于创建了大量select2实例的表中。替代解决方案也非常受欢迎。

此致

1 个答案:

答案 0 :(得分:1)

我发现在这方面弄乱价值绑定并不是一个好主意。相反,我使用另一个绑定(例如名称)并删除更新中的所有内容。结果如下:

function mapDispatchToProps(dispatch) {
  return { dispatchProductLoad: () => dispatch(productLoad(SOMEDATA)) };
};

export default connect(null, mapDispatchToProps)(Scanner);