select2 更改ajax url

tra*_*jce 3 javascript jquery knockout.js jquery-select2

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

\n
<input type="hidden" data-bind="combobox: { optionsText: \'Name\', optionsValue: \'ID\', optionsCaption: \'\xd0\x98\xd0\xb7\xd0\xb1\xd0\xb5\xd1\x80\xd0\xb8...\', sourceUrl: partnerUrl }, value: ApplyToSubject" id="ApplyToSubject" name="ApplyToSubject">\n
Run Code Online (Sandbox Code Playgroud)\n

这是检索 sourceUrl:partnerUrl 的方式:

\n
self.partnerUrl = ko.computed(function () {\n        var value = "";\n        if (something)\n        {\n            value = apiUrls.customer;\n        }\n        else if (something else)\n        {\n            value = apiUrls.vendor;\n        }\n        else if(or another thing)\n        {\n            value = apiUrls.employee;\n        }\n        return value;\n    });\n
Run Code Online (Sandbox Code Playgroud)\n

我使用自定义绑定。\n以下是它的代码:

\n
// documentation http://ivaynberg.github.io/select2/\nko.bindingHandlers.combobox = {\n    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {\n        var obj = valueAccessor(),\n            allBindings = allBindingsAccessor();\n        var optionsText = ko.utils.unwrapObservable(obj.optionsText);\n        var optionsValue = ko.utils.unwrapObservable(obj.optionsValue);\n        var sourceUrl = ko.utils.unwrapObservable(obj.sourceUrl);\n        var selectedID = ko.utils.unwrapObservable(allBindings.value);\n        var model = obj.model;\n        var unwrapped = ko.utils.unwrapObservable(obj.model);\n\n        $(element).select2({\n            minimumInputLength: 3,\n            formatResult: function formatResult(result) {\n                return result.text;\n            },\n            data: function (model) {\n                return { id: unwrapped[optionsValue](), text: unwrapped[optionsText](), data: unwrapped }\n            },\n            initSelection: function (element, callback) {\n                if (unwrapped && selectedID !== "") {\n                    callback({ id: unwrapped[optionsValue](), text: unwrapped[optionsText](), data: unwrapped });\n                }\n            },\n            ajax: {\n                quietMillis: 500,\n                url: subdirUrl + sourceUrl,\n                dataType: \'json\',\n                data: function (search, page) {\n                    return {\n                        page: page,\n                        search: search\n                    };\n                },\n                results: function (data) {\n                    var result = [];\n                    $.each(data.list, function (key, value) {\n                        result.push({ id: value[optionsValue], text: value[optionsText], data: value });\n                    });\n                    var more = data.paging.currentPage < data.paging.pageCount;\n                    return { results: result, more: more };\n                }\n            }\n        });\n        $(element).on(\'select2-selected\', function (eventData) {\n            if (eventData.choice) {\n                // item selected\n                var selectedItem = eventData.choice.data;\n                var selectedId = eventData.choice.id;\n                model(selectedItem);\n            }\n            else {\n                model(undefined);\n            }\n        });\n\n        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {\n            $(element).select2(\'destroy\');\n        });\n    },\n    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {\n        var obj = valueAccessor(),\n            allBindings = allBindingsAccessor();\n        var selectedID = ko.utils.unwrapObservable(allBindings.value);\n        $(element).val(selectedID).trigger(\'change\');\n    }\n};\n
Run Code Online (Sandbox Code Playgroud)\n

它适用于不会更改的网址,但对于需要更新的网址,我无法使其工作。\n(看起来它保留了传递的第一个网址(sourceUrl)。

\n

tra*_*jce 5

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

根据我从 select2 文档中读到的内容,您应该将字符串或函数传递给 ajax url 参数。这就是我所做的,
我编写了一个返回可观察值(即网址)的函数:

self.returnUrl = function () {
    return self.dynamicUrl();
};
Run Code Online (Sandbox Code Playgroud)

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

<input data-bind="combobox: { ... sourceUrl: $data.returnUrl }, value: ApplyToSubject" type="hidden" >
Run Code Online (Sandbox Code Playgroud)

然后,自定义绑定的工作方式与问题中的代码相同,但有一个小变化:

...
ajax: {
     url: sourceUrl <- this is the returnUrl function
...
}
Run Code Online (Sandbox Code Playgroud)