3
使用继autosuggest example设置一个对象,我需要保留和从amp-selector
而不是使用纯字符串对象。如何使用安培选择器从顶层阵列中安培绑定
这是JSON从API:
[{
"name": "Singapore",
"cityCode": "SIN",
"countryName": "Singapore",
"type": "city"
}, {
"name": "Sinop",
"cityCode": "NOP",
"countryName": "Turkey",
"type": "city"
}, {
"name": "Sinop",
"cityCode": "OPS",
"countryName": "Brazil",
"type": "city"
}]
渲染使用AMP:
<amp-list
class="autosuggest-box"
layout="fixed-height"
height="130"
src="<url>"
id="autosuggest-list"
single-item
items="."
>
<template type="amp-mustache">
<amp-selector
id="autosuggest-selector"
keyboard-select-mode="focus"
layout="container"
on="
select:
AMP.setState({
locationObj: event.targetOption,
showDropdown: false
}),
autosuggest-list.hide"
>
{{#.}}
<div
class="location-item no-outline"
role="option"
tabindex="0"
on="tap:autosuggest-list.hide"
option="{{.}}"
>{{name}}, {{countryName}}</div>
{{/.}}
</amp-selector>
</template>
</amp-list>
由于this answer为{{.}}
语法是无处在髭文档。然而,locationObj
仪表放大器绑定打印绑定的领域[object Object]
,当我尝试使用locationObj.name
它打印null
这里的绑定代码
<input
type="text"
class="search-box"
on="
input-debounced:
AMP.setState({
showDropdown: event.value
}),
autosuggest-list.show;
tap:
AMP.setState({
showDropdown: 'true'
}),
autosuggest-list.show"
[value]="locationObj ? locationObj.name : ''"
value=""
required
autocomplete="off"
/>
AMP文件没有说明任何方式记录任何在控制台,所以我一直在想什么locationObj
通过设置{{.}}
不确定'#.'和'/ .'将在AMP中工作。 '{{。}}'将读取JSON数组。您可能需要识别JSON密钥。如果将JSON放入子结构中,则可以使用父键调用该数组。 –
@JayGray是的,如果我们改变我们的结构以在'items'键中包含一个数组,就可以工作。但不幸的是,我们不能像4种不同平台的API一样在生产中使用。 – adnanyousafch