如何使用顶级数组中的 amp-selector 设置对象以在 amp-bind 中使用

Question

在 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 的 {{.}} 语法，Mustache 文档中没有。但是，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 到 {{.}}

中设置了什么

Answer 1

感谢卡洛斯 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>

在 <amp-state> 中定义与在 <amp-list> 中相同的 [src] 也将响应存储在状态变量中，稍后可用于根据来自 state.

中本地保存数组的对象（在本例中为 allLocations.filter(x=>x.code == event.targetOption)[0]）

如何使用顶级数组中的 amp-selector 设置对象以在 amp-bind 中使用

How to set an object using amp-selector from top-level array to use in amp-bind

javascript

mustache

amp-html