带有 ajax 的淘汰赛3+select2 (v4)

Posted 2023-05-07

【中文标题】带有 ajax 的淘汰赛3+select2 (v4)

【英文标题】：Knockout3+select2 (v4) with ajax

【发布时间】：2018-08-01 15:12:40

【问题描述】：

我正在尝试让 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 实例的表中。替代解决方案也非常受欢迎。

问候

【问题讨论】：

你是说当 select2 发生变化时，你的“hacky 解决方案”不会更新 value-bound observable？

@RoyJ 有时效果很好，但不是很一致。此外，它似乎与 select2 的其他一些实例混淆了，我不知道为什么

拥有value 绑定有意义吗？本机选择（即选择绑定的内容）是否会干扰 select2 行为？似乎您的绑定处理程序应该包含 value 绑定。

@RoyJ 它没有 - 至少不是一个好主意。我已经发布了我的解决方案作为答案。感谢您的帮助！

【参考方案1】：

我发现在这方面搞乱值绑定并不是一个好主意。相反，我使用另一个绑定（例如名称）并删除更新中的所有内容。结果是这样的：

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) => 

    
;

【讨论】：

谢谢你这解决了我的问题，正如你所说的重要部分是创建一个模型而不是依赖原始值