如何在AMP的amp-list模板中混合多个JSON数据源的字段？

I get it—you're stuck trying to pull a value from a second JSON source into an amp-list template that's already bound to a primary JSON feed, and merging the two data services isn't an option. Let's break down the correct approach here, since nested templates/lists aren't going to work as you've discovered.

The Key: Use amp-state to Preload Your Second JSON Data #

AMP allows you to preload external data into a global state container using <amp-state>, which your amp-list template can then reference directly. This is perfect for your scenario where you need a single value (like UID) from a separate JSON service.

Step-by-Step Implementation #

1. Add the amp-state component to your page
   You'll need to include the amp-state script in your document's <head>:

   <script async custom-element="amp-state" src="https://cdn.ampproject.org/v0/amp-state-0.1.js"></script>
   

2. Preload your second JSON source into amp-state
   Define an <amp-state> element that fetches json2 and stores its data. Assuming json2 returns a structure like {"UID": "your-unique-id"}, this would look like:

   <amp-state id="secondaryData" src="//json2"></amp-state>
   

3. Update your amp-list template to reference the state value
   In your template, replace the {{UID}} placeholder with a reference to the preloaded state value. AMP Mustache templates can access global amp-state data using the state ID:

   <amp-list id="mylist" width="auto" height="160px" layout="fixed-height" src="//json1">
     <template type="amp-mustache">
       <a href="{{buyURL}}={{secondaryData.UID}}">
         <amp-img 
           src="{{logoURL}}" 
           width="{{logoWidth}}" 
           height="{{logoHeight}}" 
           layout="fixed" 
           alt="{{name}}"
         >
         </amp-img>
       </a>
     </template>
   </amp-list>
   

Important Notes #

• Data Loading Order: AMP will handle dependencies automatically, but if your second JSON loads slower than the first, there's a chance the UID might be missing when the amp-list first renders. If this is a problem, you can use AMP Bind to delay the amp-list's data fetch until the amp-state is loaded. For example:

  <amp-list 
    id="mylist" 
    width="auto" 
    height="160px" 
    layout="fixed-height" 
    [src]="secondaryData.UID ? '//json1' : ''"
    src=""
  >
    <!-- template remains the same -->
  </amp-list>
  

  This way, the amp-list only fetches json1 once secondaryData.UID is available.
• Multiple Values from json2: If json2 returns an array instead of a single object, you'd need to adjust the reference (e.g., secondaryData.items[0].UID), but since you mentioned needing just UID, this shouldn't be an issue.

Why Your Previous Attempts Didn't Work #

• Nested Templates: AMP explicitly doesn't allow nested Mustache templates inside amp-list, so that approach will always throw an error.
• Nested Lists: While you can nest amp-list elements, each list's template can only access data from its own src feed—you can't cross-reference data between parent/child lists in the way you need.

内容的提问来源于stack exchange，提问作者Fer