[英]How to set an object using amp-selector from top-level array to use in amp-bind
Following the autosuggest example , I need to retain and use object instead of plain string from amp-selector
. 在autosuggest示例之后 ,我需要保留并使用object而不是amp-selector
的plain string。
This is JSON from API: 这是来自API的JSON:
[{
"name": "Singapore",
"cityCode": "SIN",
"countryName": "Singapore",
"type": "city"
}, {
"name": "Sinop",
"cityCode": "NOP",
"countryName": "Turkey",
"type": "city"
}, {
"name": "Sinop",
"cityCode": "OPS",
"countryName": "Brazil",
"type": "city"
}]
Rendering using AMP: 使用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>
Thanks to this answer for {{.}}
syntax which is nowhere in Mustache docs. 感谢{{.}}
语法的答案 ,这在Mustache docs中是无处可去的。 However, the binded field of locationObj
in amp-bind prints [object Object]
and when I try to use locationObj.name
it prints null
但是,amp-bind中locationObj
的绑定字段打印[object Object]
,当我尝试使用locationObj.name
它打印为null
Here's the bind code 这是绑定代码
<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 Docs doesn't state any way to log anything in console so I have on idea what is being set in locationObj
through {{.}}
AMP Docs没有说明在控制台中记录任何内容的任何方法,所以我知道在locationObj
通过{{.}}
设置了什么
Thanks to Carlos at Amp Google Forum . 感谢Carlos at Amp Google Forum 。 The correct way to save and access the response of <amp-list>
is through <amp-state>
. 保存和访问<amp-list>
响应的正确方法是通过<amp-state>
。
<amp-list class="autosuggest-box"
layout="fixed-height"
height="130"
src="http://url.returning.json.array.com?query="
[src]="'http://url.returning.json.array.com?query=' + query"
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: allLocations.filter(x=>x.code == event.targetOption)[0],
showDropdown: false
}),
autosuggest-list.hide"
>
{{#.}}
<div
class="location-item no-outline"
role="option"
tabindex="0"
on="tap:autosuggest-list.hide"
option="{{code}}"
>{{name}}, {{countryName}}</div>
{{/.}}
</amp-selector>
</template>
</amp-list>
<amp-state
id="allLocations"
src="http://url.returning.json.array.com?query="
[src]="'http://url.returning.json.array.com?query=' + query"
></amp-state>
Defining same [src]
in <amp-state>
as in <amp-list>
stores the response in state variable as well, which can later be used to take an item based on a unique member of the object (eg allLocations.filter(x=>x.code == event.targetOption)[0]
in this case) from locally saved array in state. 定义相同[src]
在<amp-state>
如<amp-list>
存储在状态变量的响应,以及,这稍后可用于基于所述对象的一个独特的成员(例如,上取一个项目allLocations.filter(x=>x.code == event.targetOption)[0]
在这种情况下)来自本地保存的数组状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.