[英]How to set an object using amp-selector from top-level array to use in amp-bind
在autosuggest示例之后 ,我需要保留並使用object而不是amp-selector
的plain string。
這是來自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"
}]
使用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>
感謝{{.}}
語法的答案 ,這在Mustache docs中是無處可去的。 但是,amp-bind中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 Docs沒有說明在控制台中記錄任何內容的任何方法,所以我知道在locationObj
通過{{.}}
設置了什么
感謝Carlos at Amp Google Forum 。 保存和訪問<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>
定義相同[src]
在<amp-state>
如<amp-list>
存儲在狀態變量的響應,以及,這稍后可用於基於所述對象的一個獨特的成員(例如,上取一個項目allLocations.filter(x=>x.code == event.targetOption)[0]
在這種情況下)來自本地保存的數組狀態。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.