i try to figure out, how i can build dynamic amp-stories.
Assume i have a website like this: https://example.com/stories/:slug. This page should fetch the data for a story (with this slug) from my server first (it outputs some json data) and then it should render the data as a amp-story.
My first attempt is to use the story inside an amp-list / amp-mustache template (i removed all attributes to have a smaller example):
...
<body>
<amp-list>
<template type="amp-mustache">
<amp-story standalone>
{{#items}}
<amp-story-page id="{{id}}">
...
</amp-story-page>
{{/items}}
</amp-story>
</template>
</amp-list>
</body>
...
Now, i get this validation error:
The parent tag of tag 'amp-story' is 'template', but it can only be 'body'.
So this isn't allowed... If i switch the order of some elements like this:
<body>
<amp-story standalone>
<amp-list>
<template type="amp-mustache">
{{#items}}
<amp-story-page id="{{id}}">
...
</amp-story-page>
{{/items}}
</template>
</amp-story>
</body>
the validator claims for pages:
Story must have at least one page.
So this isn't allowed as well.
Well, is it even possible to construct a story like this or do i have to use the server to create my story pages?