Comment définir un objet à l'aide du paramètre amp-selector du tableau de niveau supérieur à utiliser dans le paramètre amp-bind

Question

Après le autosuggest example, je dois conserver et utiliser un objet au lieu de amp-selector.

Ceci est 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" 
}] 

rendu en utilisant 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> 

Merci à this answer pour {{.}} syntaxe qui est nulle part dans Mustache docs. Cependant, le champ binded de locationObj en gravures ampère-bind [object Object] et lorsque je tente d'utiliser locationObj.name il imprime null

est ici le code de liaison

<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 ne dit pas un moyen de quoi que ce soit se connecter console donc j'ai une idée de ce qui est en train d'être mis en locationObj à {{.}}

Answer 1

Merci à Carlos au Amp Google Forum. La manière correcte d'enregistrer et d'accéder à la réponse de <amp-list> passe par <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> 

Définition même [src] dans <amp-state> comme dans <amp-list> stocke la réponse dans la variable d'état ainsi, qui peut ensuite être utilisé pour prendre un élément basé sur un membre unique de l'objet (par exemple allLocations.filter(x=>x.code == event.targetOption)[0] dans ce cas) de localement tableau sauvegardé en état.