语义 UI 使用 API.js 搜索选择下拉列表 - api 调用未发生
Semantic UI Search Selection Dropdown with API.js - api call not happening
当为语义 UI 打开调试模式时,我可以在控制台中看到搜索选择下拉列表的操作,但在使用 [=39] 时我从未看到 api 调用=].js/data-action="..." 语义功能(如果我将模拟响应直接附加到搜索元素,我可以看到 API 调用)。东西设置如下:
HTML 文件:
<head>
<script type="text/javascript" src="/static/js/API.js"></script>
</head>
.......
<div class="ui search selection dropdown" data-action="lookup customer">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
API.js 文件:
var api = {
'lookup customer' : '/js/cust/{query}'
};
我还尝试了我看到的 API.js 声明的替代变体 in the docs:
$.fn.api.settings.api = { . . .
我错过了什么?此外,为了测试 API.js 功能,是否可以将 mockResponses 放入 API.js 文件中?我已尝试以下操作,但收到 "Unexpected token" 消息。
var api = {
'lookup customer' : mockResponse: {
success: true,
results: [
{"custName":"Cust 1","data-id":1},
{"custName":"Cust 2","data-id":2},
{"custName":"Cust 3","data-id":3}
]
}
};
将数据属性与 API 一起使用的最常见用例是在 JavaScript 中进行一次初始化,为多个具有独特设置的不同组件供电。
例如,假设我们想要两个单独的下拉菜单,它们使用两个不同的 URL 来返回结果。
一个用于检索客户,另一个用于检索用户。您可能会使用类似这样的东西。
要记住的一件事是,除非指定 some API 设置,否则下拉列表不会查询远程端点。因此传递一个空白对象,或者一个具有扩展设置的对象是触发远程调用所必需的。
HTML
<div class="ui search selection dropdown" data-action="lookup customer">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
<div class="ui search selection dropdown" data-action="lookup user">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
Javascript
$.fn.api.settings.api = {
'lookup customer': '/lookup/name={query}&type=customer',
'lookup user': '/lookup/name={query}&type=user',
}
$('.ui.dropdown')
.dropdown({
apiSettings: {
debug: true
}
})
;
当为语义 UI 打开调试模式时,我可以在控制台中看到搜索选择下拉列表的操作,但在使用 [=39] 时我从未看到 api 调用=].js/data-action="..." 语义功能(如果我将模拟响应直接附加到搜索元素,我可以看到 API 调用)。东西设置如下:
HTML 文件:
<head>
<script type="text/javascript" src="/static/js/API.js"></script>
</head>
.......
<div class="ui search selection dropdown" data-action="lookup customer">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
API.js 文件:
var api = {
'lookup customer' : '/js/cust/{query}'
};
我还尝试了我看到的 API.js 声明的替代变体 in the docs:
$.fn.api.settings.api = { . . .
我错过了什么?此外,为了测试 API.js 功能,是否可以将 mockResponses 放入 API.js 文件中?我已尝试以下操作,但收到 "Unexpected token" 消息。
var api = {
'lookup customer' : mockResponse: {
success: true,
results: [
{"custName":"Cust 1","data-id":1},
{"custName":"Cust 2","data-id":2},
{"custName":"Cust 3","data-id":3}
]
}
};
将数据属性与 API 一起使用的最常见用例是在 JavaScript 中进行一次初始化,为多个具有独特设置的不同组件供电。
例如,假设我们想要两个单独的下拉菜单,它们使用两个不同的 URL 来返回结果。
一个用于检索客户,另一个用于检索用户。您可能会使用类似这样的东西。
要记住的一件事是,除非指定 some API 设置,否则下拉列表不会查询远程端点。因此传递一个空白对象,或者一个具有扩展设置的对象是触发远程调用所必需的。
HTML
<div class="ui search selection dropdown" data-action="lookup customer">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
<div class="ui search selection dropdown" data-action="lookup user">
<input type="hidden" id="id_customer">
<i class="dropdown icon"></i>
<div class="default text">Select a Customer...</div>
</div>
Javascript
$.fn.api.settings.api = {
'lookup customer': '/lookup/name={query}&type=customer',
'lookup user': '/lookup/name={query}&type=user',
}
$('.ui.dropdown')
.dropdown({
apiSettings: {
debug: true
}
})
;