select2更改ajax网址 [英] select2 change ajax url

问题描述

我正在使用knockout.js和 select2 插件。

我正在尝试根据observable的值更改select2 ajax url。

例如，如果基于某些选择，我会调用1 url或其他的ajax。
以下是示例代码：

Im working with knockout.js and select2 plugin.
Im trying to change the select2 ajax url based on a value of an observable.
for example if based on some selection i do ajax call to 1 url or another. Here is a sample code:

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

这是检索sourceUrl：partnerUrl的方式：

This is how the sourceUrl: partnerUrl is retrieved:

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;
    });

我使用自定义绑定。
以下是代码：

I work with custom binding. Here is the code for it:

// 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');
    }
};

它适用于不会更改的网址，但对于需要更新的网址，我无法使其正常工作。
（看起来它保留了传递的第一个网址（sourceUrl）。

It works for url's that dont change, but for urls that need to update, i cant make it work. (it seems like its keeping the first url that was passed (sourceUrl).

推荐答案

我终于成功了解决这个问题。

I've finally managed to solve this one.

根据我从select2文档中读到的内容，
你应该将字符串或函数传递给ajax url参数。
所以这就是我所做的事情

我写了一个函数来返回observable的值（这是url）：

From what i could read from the select2 documentation, you should pass string or function to ajax url parameter. So this is what i've done
I've written a function that returns value of the observable (which is the url):

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

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

And then i pass that function to my custom binding options:

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

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

Then the custom binding works the same as in the code in the question, with a small change:

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

这篇关于select2更改ajax网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！