Question

在autosuggest example之后，我需要保留并使用对象而不是来自amp-selector的纯字符串。

这是来自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>

感谢this answer {{.}}语法在Mustache文档中无处可用。但是，放大器绑定中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在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]也将响应存储在状态变量中，以后可用于根据对象的唯一成员获取项目（例如，在本例中为public String a = "0"; //declare this globally at the top. button.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View view) { if(a.equals("0") { move(); } else { // do what you want to do by clicking on the menu button once it is moved by 30% Toast.makeText(MainActivity.this,"Menu button Clicked", Toast.LENGTH_SHORT).show(); } a = "1"; } });）来自本地保存的状态数组。

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

1 个答案: