在amp-list中使用amp-selector

时间:2018-03-16 14:07:35

标签: amp-html google-amp amp-bind amp-list

是否可以在amp-selector内使用amp-list?在页面加载时,将呈现项目,但在应用过滤器时,项目不会呈现。

<!-- Filter Macros -->
<amp-bind-macro id="USFilter" expression="regions.US ? model.region == 'US' : false"></amp-bind-macro>

<amp-bind-macro id="UKFilter" expression="regions.UK ? model.region == 'UK' : false"></amp-bind-macro>

<amp-bind-macro id="filteredModels" expression="models.items[0].models.filter( model => USFilter() || UKFilter() )"></amp-bind-macro>


<!-- display models -->
<div class="center">
  <amp-list width="auto" height="800" [height]="60 * filteredModels().length" layout="fixed-height" src="/data.json" [src]="filteredModels()">
    <template type="amp-mustache">
      <div class="">

        <amp-selector layout="container" name="">
          <ul>
            {{#models}}
            <li class="modelOption" option="{{name}}" value="{{name}}">
              <div class="model-selector">
              <strong>{{name}}</strong>
            </div>
            </li>
            {{/models}}
          </ul>
        </amp-selector>
        
      </div>
    </template>
  </amp-list>
</div>

这是数据:

{
  "items": [{
    "models": [
      {
        "name": "Tshirt 1",
        "region": "US"
      },

      {
        "name": "Tshirt 2",
        "region": "US"
      },

      {
        "name": "Tshirt 3",
        "region": "US"
      },

      {
        "name": "Tshirt 4",
        "region": "UK"
      },

      {
        "name": "Tshirt 5",
        "region": "UK"
      },

      {
        "name": "Tshirt 6",
        "region": "UK"
      }
    ]
  }]
}

0 个答案:

没有答案