如何使用安培选择器从顶层阵列中安培绑定

问题描述：

使用继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为{{.}}语法是无处在髭文档。然而，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文件没有说明任何方式记录任何在控制台，所以我一直在想什么locationObj通过设置{{.}}

不确定'＃.'和'/ .'将在AMP中工作。 '{{。}}'将读取JSON数组。您可能需要识别JSON密钥。如果将JSON放入子结构中，则可以使用父键调用该数组。 –

@JayGray是的，如果我们改变我们的结构以在'items'键中包含一个数组，就可以工作。但不幸的是，我们不能像4种不同平台的API一样在生产中使用。 – adnanyousafch

答

感谢卡洛斯在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>从本地定义相同[src]如<amp-list>存储在状态变量的响应，以及，这稍后可用于基于（在这种情况下例如allLocations.filter(x=>x.code == event.targetOption)[0]）的对象的唯一构件上取一个项目保存状态的数组。

如何使用安培选择器从顶层阵列中安培绑定

相关推荐