1

我正在使用 amp-list 进行无限滚动，但无法找到如何对每个加载的页面进行 urlencode（更改）接收到的 JSON 数据值。我不希望服务器同时发送普通编码字符串和 urlencoded，因为这将导致数据大小加倍（每页 200 个字符串将变为 400 个）。这是我的 amp-list 无限滚动的工作代码：

        <amp-list height="500" width="440" 
        layout="responsive" load-more="auto"
        src="www.myPage.com/firstPageToLoad.json" binding="no">

           <template type="amp-mustache">

              <ul>
                {{#words}} 
                <li>
                    <a class="synWord" href="www.myPage.com/{{.}}">{{.}}</a>    
                </li>
                {{/words}}
              </ul> 

          </template>

        </amp-list>

所以我的问题是：如何在客户端对“{{.}}”值进行urlencode？我已阅读所有文档，但找不到任何解决方案。我试图这样做：

<amp-state id="allData" src="www.myPage.com/firstPageToLoad.json"></amp-state> 

<amp-list [src]="allData.words.map(word => encodeURIComponent(word))"
src="www.myPage.com/firstPageToLoad.json" 
height="500" width="440" 
layout="responsive" load-more="auto" binding="no">

这不起作用。我认为这是因为滚动时会自动加载数据，而我的 amp-state 未绑定到该事件。

4

1 回答 1

1

这是hacky解决方案：

  1. 将 binding="always" 属性设置为 amp-list。

  2. 然后在模板中这样做：

    <a [href]="'http://www.mypage.com/'+encodeURIComponent('{{.}}')">{{.}}</a>

于 2020-01-29T14:29:11.210 回答