トップレベル配列のamp-selectorを使用してアンプバインドで使用するオブジェクトを設定する方法

Question

autosuggest exampleに続いて、amp-selectorのプレーンストリングの代わりにオブジェクトを保持して使用する必要があります。

これはAPIからJSONです：AMPを使用して

[{ 
    "name": "Singapore", 
    "cityCode": "SIN", 
    "countryName": "Singapore", 
    "type": "city" 
}, { 
    "name": "Sinop", 
    "cityCode": "NOP", 
    "countryName": "Turkey", 
    "type": "city" 
}, { 
    "name": "Sinop", 
    "cityCode": "OPS", 
    "countryName": "Brazil", 
    "type": "city" 
}] 

レンダリング：口ひげのドキュメントではどこにもありません{{.}}構文についてthis answerへ

<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> 

感謝。しかし、アンプ・バインドプリントでlocationObjの分野[object Object]バインドさと私はlocationObj.nameを使用しようとすると、それはここでは、バインドコードAMPドキュメントがで何かをログに記録する方法を述べるいない

<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" 
    /> 

だnull

を印刷しますコンソールなので、何が設定されているのかが分かります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-list>格納後（この場合、例えばallLocations.filter(x=>x.code == event.targetOption)[0]）オブジェクトの一意のメンバーに基づいてアイテムを取るために使用することができるだけでなく、状態変数に応じ、と<amp-state>同じ[src]定義状態で保存された配列。