Amphtml: "on" attribute on amp-list and amp-list specific events

[hamousavi]

What's the issue?

AMP provides a number of element specific events as listed on https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md#element-specific-events

Can we have an amp-list specific event that is triggered when the amp-list fetching is completed?

How do we reproduce the issue?

We are looking for something like the "load" event as outlined in the following example

<amp-list on=”load:AMP.setState({some state : json response})” … >

So that we can store the response in an AMP state.

[aghassemi]

/to @choumx

[choumx]

Thanks for the filling this issue.

For your use case, try using an amp-state element with a src attribute that will load your JSON from a CORS endpoint in combination with an amp-list element with a [state] binding to render the JSON data at the given expression value. For example:

<amp-state id="myState" src="<my-url>"></amp-state>
<amp-list [state]="myState"></amp-list>

The latter is a relatively new feature -- we'll add documentation for it soon.

/cc @ericlindley-g

[hamousavi]

This is awesome William. Thanks.

[alexlyeh]

Wouldn't this would only update the amp-list with the loaded state if AMP.setState() is called again somewhere else? I tried it out, and I couldn't get the amp-list to load unless I manually triggered a button that had on="tap:AMP.setState()". Is there a way to render the specified bindings automatically after the JSON loads?

[choumx]

@alexlyeh Correct! Though this is slightly different from the original FR. The concern with automatically triggering mutation after the XHR completes is that it could cause dramatic, unexpected changes to the document (e.g. page jumping) so we try to restrict that to direct user interaction.

One way to accomplish this now that we have trustful actions (#9824) is to add a new low-trust event amp-state:fetch and a low-trust action amp-list.update (similar to existing amp-live-list.update). However, it's arguable that the fetch event should have zero trust since there's no user intentionality.

<amp-state id="myState" src="<my-url>" on="fetch:myList.update"></amp-state>
<amp-list id="myList" [state]="myState"></amp-list>

Another way to do this is to delay render of amp-list:

<!-- Detect if template has bindings. 
     If so, wait for bind eval before update (w/ timeout). -->
<amp-list id="myList" src="<my-url>">
  <template type="amp-mustache">
    <p [text]="foo.bar"></p>
  </template>
</amp-list>

Note that the latter won't update the local bindable state with the XHR response.

@ericlindley-g This is similar to @cramforce's amp-fresh component FR, modulo the placeholder.

[alexlyeh]

@choumx Thanks for the clarifications!

[hamousavi]

@choumx in you example src attribute is dropped from amp-list. How would one get away with not specifying the src attribute on amp-list? Is not src a required attribute?

[choumx]

@hamousavi Currently it is required -- my example is hypothetical. Is your use case the same as above?

[ericlindley-g]

@choumx — this is interesting. Since developers could specify their own placeholder/loading indicator, this might fit the need nicely.

[hamousavi]

Agreed with @ericlindley-g . This will nicely fit our case.

[aadi1295]

@choumx

Hi, can you look at this question I am unable to update amp-state and amp-list with amp-bind. Thanks

[choumx]

@aadi1295 FYI you can also ask AMP questions on the amphtml-discuss group or on our Slack channel.

[leoshaw]

I'm getting this in the console when using [state]

[state] is deprecated, please use [src] instead.

is this still the recommended way to update the list dynamically? I've tried using [src] pointing to the name of the object in the state, but it complains:

Default value for [src] does not match first expression result (null). This can result in unexpected behavior after the next state change.​​​

[choumx]

@leoshaw Yes, please use [src] instead. We'll probably remove that warning since it's been a source of confusion.

[JakobEichler]

I'd like to use this in order to compute a dynamic height, based on the amount of items loaded for the amp-list. But it seems that the solution pointed out here is not yet implemented?

[jukefr]

@JakobEichler

[height]="someState.items.length * BASE_ITEM_SIZE_HERE"

[joakimkm]

Thanks for the filling this issue.

For your use case, try using an amp-state element with a src attribute that will load your JSON from a CORS endpoint in combination with an amp-list element with a [state] binding to render the JSON data at the given expression value. For example:

<amp-state id="myState" src="<my-url>"></amp-state>
<amp-list [state]="myState"></amp-list>

The latter is a relatively new feature -- we'll add documentation for it soon.

/cc @ericlindley-g

How to solve this with load-more="auto" attribute set?
I need a way to access new automatic fetched JSON-data.