编辑 amp-list 中的数据

Question

I am making an infinite scroll with amp-list and can not find out how to urlencode (change) received JSON-data values for each page loaded. I do not want server to send both normal encoded string and urlencoded, because this will result in double sized data (200 strings will become 400 for each page). This is my working code for amp-list infinite-scroll:

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

So my question is: How can I urlencode "{{.}}" values on client side? I have read all documentation and can not find any solution. I have tried to do like this:

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

This do not work. I think its because data is auto-loaded when scrolling and my amp-state is not bind to that event.

Answer 1

Here comes hacky solution:

1. Set binding="always" attribute to amp-list.

2. Then in template do this:

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