0

我必须使用 Ajax API 调用在 Google AMP 页面中创建一个动态手风琴。以下是我从 API 得到的响应

{
topics: [
{
  title: "Fashion",
  slug: "fashion",
  id: 3,
  topic_icon:
    "https://img-static.popxo.com/manual-uploads/app_category_icons/fashion_category_ic.png",
  description:
    `"Do you eat, sleep and breathe fashion? 'Coz we do!\n` +
    'High street labels to local markets, to lesser-known online brands, we know where to find the trendiest stuff and how to style it right!"',
  sort_index: 1,
  sub_categories: [
    {
      title: "Latest Trends: Western",
      slug: "western-wear",
      id: 70,
      main_category_slug: "fashion",
      description: "Latest Trends: Western",
      further_sub_categories: [[Object], [Object], [Object], [Object]],
    },
    {
      title: "DIY Fashion",
      slug: "diy",
      id: 68,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
    {
      title: "Accessories",
      slug: "accessories",
      id: 66,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object], [Object], [Object]],
    },
    {
      title: "Latest Trends: Indian",
      slug: "indian-wear",
      id: 69,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object]],
    },
    {
      title: "Celebrity Style",
      slug: "celeb-fashion",
      id: 67,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
  ],
},
{
  title: "Beauty",
  slug: "beauty",
  id: 1,
  topic_icon:
    "https://img-static.popxo.com/manual-uploads/app_category_icons/beauty_category_ic.png",
  description:
    '"Conquer the world, one red lipstick at a time!\n' +
    `Are you looking for reliable makeup reviews? Tired of searching the internet for solutions to your beauty woes and coming up with nothing? Look no further! We've got expert answers to all your beauty problems in one place!"`,
  sort_index: 2,
  sub_categories: [
    {
      title: "Latest Trends: Western",
      slug: "western-wear",
      id: 70,
      main_category_slug: "fashion",
      description: "Latest Trends: Western",
      further_sub_categories: [[Object], [Object], [Object], [Object]],
    },
    {
      title: "DIY Fashion",
      slug: "diy",
      id: 68,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
    {
      title: "Accessories",
      slug: "accessories",
      id: 66,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object], [Object], [Object]],
    },
    {
      title: "Latest Trends: Indian",
      slug: "indian-wear",
      id: 69,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [[Object]],
    },
    {
      title: "Celebrity Style",
      slug: "celeb-fashion",
      id: 67,
      main_category_slug: "fashion",
      description: null,
      further_sub_categories: [],
    },
  ],
},

]; }

AMP HTML 中的代码

{{~it.hamburgerData.topics :value:index}}
<amp-accordion expand-single-section>
  <section>
    <h2>{{=value.title}}</h2>
    <amp-list id="myList" src="{{=value.sub_categories}}" [is-layout-container]="true" binding="no">
      <template type="amp-mustache">
        <div>{{title}}</div>
      </template>
    </amp-list>
  </section>
</amp-accordion>
{{~}}

我想创建一个动态汉堡菜单，我在其中使用 AMP 手风琴，主题数组将是手风琴值，sub_categories是子菜单的嵌套数组。手风琴工作正常，但 amp-list 标记不起作用。有人请帮助我处理这个动态手风琴或建议一些更好的实施方式

4

0 回答 0