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

Question

在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通过{{.}}设置了什么

Answer 1

感谢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]在这种情况下）来自本地保存的数组状态。