tra*_*jce 3 javascript jquery knockout.js jquery-select2
我正在使用 knockout.js 和select2插件。
\n我试图根据可观察值更改 select2 ajax url。
\n例如,如果基于某些选择,我会对 1 个 url 或另一个进行 ajax 调用。\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 的方式:
\nself.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我终于设法解决了这个问题。
根据我从 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)
归档时间: |
|
查看次数: |
4754 次 |
最近记录: |