select2 更改 ajax 网址

Posted 2023-05-07

【中文标题】select2 更改 ajax 网址

【英文标题】：select2 change ajax url

【发布时间】：2014-10-18 21:12:49

【问题描述】：

我正在使用 knockout.js 和 select2 插件。 我试图根据可观察的值更改 select2 ajax url。 例如，如果基于某些选择，我对 1 个 url 或另一个进行 ajax 调用。 这是一个示例代码：

<input type="hidden" data-bind="combobox:  optionsText: 'Name', optionsValue: 'ID', optionsCaption: 'Избери...', sourceUrl: partnerUrl , value: ApplyToSubject" id="ApplyToSubject" name="ApplyToSubject">

这就是 sourceUrl: partnerUrl 的检索方式：

self.partnerUrl = ko.computed(function () 
        var value = "";
        if (something)
        
            value = apiUrls.customer;
        
        else if (something else)
        
            value = apiUrls.vendor;
        
        else if(or another thing)
        
            value = apiUrls.employee;
        
        return value;
    );

我使用自定义绑定。 这是它的代码：

// documentation http://ivaynberg.github.io/select2/
ko.bindingHandlers.combobox = 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor();
        var optionsText = ko.utils.unwrapObservable(obj.optionsText);
        var optionsValue = ko.utils.unwrapObservable(obj.optionsValue);
        var sourceUrl = ko.utils.unwrapObservable(obj.sourceUrl);
        var selectedID = ko.utils.unwrapObservable(allBindings.value);
        var model = obj.model;
        var unwrapped = ko.utils.unwrapObservable(obj.model);

        $(element).select2(
            minimumInputLength: 3,
            formatResult: function formatResult(result) 
                return result.text;
            ,
            data: function (model) 
                return  id: unwrapped[optionsValue](), text: unwrapped[optionsText](), data: unwrapped 
            ,
            initSelection: function (element, callback) 
                if (unwrapped && selectedID !== "") 
                    callback( id: unwrapped[optionsValue](), text: unwrapped[optionsText](), data: unwrapped );
                
            ,
            ajax: 
                quietMillis: 500,
                url: subdirUrl + sourceUrl,
                dataType: 'json',
                data: function (search, page) 
                    return 
                        page: page,
                        search: search
                    ;
                ,
                results: function (data) 
                    var result = [];
                    $.each(data.list, function (key, value) 
                        result.push( id: value[optionsValue], text: value[optionsText], data: value );
                    );
                    var more = data.paging.currentPage < data.paging.pageCount;
                    return  results: result, more: more ;
                
            
        );
        $(element).on('select2-selected', function (eventData) 
            if (eventData.choice) 
                // item selected
                var selectedItem = eventData.choice.data;
                var selectedId = eventData.choice.id;
                model(selectedItem);
            
            else 
                model(undefined);
            
        );

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () 
            $(element).select2('destroy');
        );
    ,
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor();
        var selectedID = ko.utils.unwrapObservable(allBindings.value);
        $(element).val(selectedID).trigger('change');
    
;

它适用于不更改的 url，但对于需要更新的 url，我无法使其工作。 （它似乎保留了传递的第一个网址（sourceUrl）。

【问题讨论】：

ko.computed 仅在方法逻辑中使用的任何可观察对象发生更改时触发。因此，如果您的任何东西、其他东西等都不是可观察的或自己计算的，它只会返回一个值。

在If语句中，变量是observables，每次内部值变化时都会更新ko.computed变量。但是自定义绑定ajax url值，似乎保持初始值

你应该考虑把它放在 jsfiddle 上。

【参考方案1】：

我终于设法解决了这个问题。

从我可以从 select2 文档中读到的内容， 您应该将字符串或函数传递给 ajax url 参数。 所以这就是我所做的 我编写了一个返回可观察值（即 url）的函数：

self.returnUrl = function () 
    return self.dynamicUrl();
;

然后我将该函数传递给我的自定义绑定选项：

<input data-bind="combobox:  ... sourceUrl: $data.returnUrl , value: ApplyToSubject" type="hidden" >

然后自定义绑定的工作方式与问题中的代码相同，只是稍作改动：

...
ajax: 
     url: sourceUrl <- this is the returnUrl function
...