堆棧內存溢出
  簡體   English   中英

Google AMP“顯示更多按鈕”組件不起作用

[英]Google AMP 'show more button' component not working

 原文  2018-03-21 07:16:09  1   1    html/ json/ amp-html

問題描述

我正在使用 Google AMP，我想在我的模板中添加一個加載更多按鈕。 我正在關注這個例子。 我正在通過 JSON 獲取數據，但這里有些可疑我在控制台service.js:255 Response must contain an array at " items "收到此錯誤service.js:255 Response must contain an array at " items "

我的 HTML 模板代碼

<amp-state id="tagsState"
  src="my_api_url">
    </amp-state>
    <amp-state id="tag">
        <script type="application/json">
            {
              "moreItemsPageIndex": 0,
              "hasMorePages": true
            }
        </script>
    </amp-state>
    <amp-list src="my_api_url"
      [src]="tagsState.contentItems"
      width="320"
      height="144"
      [height]="tagsState.contentItems.length * 24"
      class="m1">
      <template type="amp-mustache">
        <div class="searchResult-each">
            <div class="result-image-section">
                <amp-img src="{{mediaAsset.imageUrl}}" width="4" height="3" layout="responsive">
                    <amp-img src="my_site_url/static/web-rev/img/default_img.jpg" alt="DefaultImg" fallback width="4" height="3" layout="responsive"></amp-img>
                </amp-img>
                <div class="media-icon">
                    <span>00:22</span>
                    <i class="icon-video-play"></i>
                </div>
            </div>
            <div class="result-content-section">
                <div class="date-time">{{date}} </div>
                <div class="title">{{headline}}</div>
            </div>
        </div>          
      </template>
    </amp-list>
    <form method="GET"
      action="https://ampbyexample.com/json/more_related_tags_page"
      action-xhr="https://ampbyexample.com/json/more_related_tags_page"
      target="_top"
      on="submit-success: AMP.setState({
                tagsState: { 
                  contentItems: tagsState.contentItems.concat(event.response.contentItems)
                },
                tag: {
                  moreItemsPageIndex: tag.moreItemsPageIndex + 1,
                  hasMorePages: event.response.hasMorePages
                }
              });">
      <input type="hidden"
        name="moreItemsPageIndex"
        value="0"
        [value]="tag.moreItemsPageIndex">
      <input type="submit"
        value="Show more"
        class="ampstart-btn caps m1 show"
        [class]="(tag.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
    </form>

這是我的 JSON

    {
"envelope": {
"self": "/my_site_api_url/rest/v2/search/tag.json?deviceType=MOBILE&offset=0&pageSize=16&s=%D9%84%D9%88%D9%83%D8%A7%D9%83%D9%88&sort=DATE&supportsInfographic=true",
"revision": "2018-03-20T09:12:26Z",
"date": "2018-03-20T09:12:26Z",
"totalResults": 12,
"copyright": "كافة العلامات التجارية الخاصة بـ SKY وكل ما تتضمنه من حقوق الملكية الفكرية هي ملك لمجموعة Sky International AG ولا تستخدم إلا بتصريح مسبق",
"serverTime": "2018-03-20T13:59:54Z"
},
    "contentItems": [
        {
        "id": "1031930",
        "self": "/my_site_api_url/rest/v2/article/1031930.json",
        "revision": "2018-03-20T09:12:26Z",
        "date": "2018-03-20T09:12:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "\"كوابيس مورينيو\".. لاعبون أهملهم فصاروا نجوما",
        "summary": "بعد أسبوع صعب واجهه جوزيه مورينيو، مدرب مانشستر يونايتد الإنجليزي، بسبب الخروج من بطولة دوري أبطال أوروبا، عاد للواجهة موضوع اللاعبين الذين استغنى عنهم المدير الفني البرتغالي سابقا، وأصبحوا نجوما مؤثرين اليوم.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/20/1031926/{width}/{height}/1-1031926.jpg",
        "type": "IMAGE_SET",
        "caption": "مورينيو فشل في اكتشاف صلاح في تشلسي",
        "id": "1031926",
        "urlFriendlySuffix": "مورينيو-فشل-اكتشاف-صلاح-تشلسي",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-20T09:12:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "كوابيس-مورينيو-لاعبون-أهملهم-فصاروا-نجوما"
        },
        {
        "id": "1031032",
        "self": "/my_site_api_url/rest/v2/article/1031032.json",
        "revision": "2018-03-17T10:23:59Z",
        "date": "2018-03-17T10:23:59Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "مورينيو يهاجم \"المتخاذلين\".. ويستشهد بـ\"الفشلة\"",
        "summary": "هاجم المدير الفني البرتغالي لمانشستر يونايتد جوزيه مورينيو، نجوم فريقه، وطالبهم بـ\"النضج\" وتحمل ضغوط اللعب لفريق بحجم \"الشياطين الحمر\".",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/17/1031031/{width}/{height}/1-1031031.jpg",
        "type": "IMAGE_SET",
        "caption": "مورينيو وضع اللوم على لاعبيه",
        "id": "1031031",
        "urlFriendlySuffix": "مورينيو-وضع-اللوم-لاعبيه",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-17T10:23:59Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مورينيو-يهاجم-المتخاذلين-ويستشهد-بـالفشلة"
        },
        {
        "id": "1029010",
        "self": "/my_site_api_url/rest/v2/article/1029010.json",
        "revision": "2018-03-10T15:38:41Z",
        "date": "2018-03-10T15:34:18Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "شاهد ماذا كتب مورينيو قبل تسجيل هدفين في مرمى ليفربول",
        "summary": "قالت صحيفة \"ذا صن\" البريطانية إن التغيير التكتيكي الذي أقدم عليه المدرب جوزيه مورينيو، ساهم في تسجيل مانشستر يونايتد هدفين عبر اللاعب ماركوس راشفورد في مرمى ليفربول، السبت.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/03/10/1029015/{width}/{height}/1-1029015.jpg",
        "type": "IMAGE_SET",
        "caption": "الملاحظة التي دوّنها مورينيو على مذكرته",
        "id": "1029015",
        "urlFriendlySuffix": "الملاحظة-دوّنها-مورينيو-مذكرته",
        "autoPlay": false
        },
        "lastEditDate": "2018-03-10T15:34:18Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "شاهد-كتب-مورينيو-تسجيل-هدفين-مرمى-ليفربول"
        },
        {
        "id": "1022760",
        "self": "/my_site_api_url/rest/v2/article/1022760.json",
        "revision": "2018-02-17T20:12:08Z",
        "date": "2018-02-17T20:12:08Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "اليونايتد إلى ربع نهائي كأس الاتحاد.. وجدل حول تقنية الفيديو",
        "summary": "تأهل مانشستر يونايتد إلى ربع نهائي كأس الاتحاد الإنجليزي بفوزه على مضيفه هادرسفيلد 2-صفر، السبت، في مباراة أثارت جدلا حول تقنية الفيديو المساعدة للحكام.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2018/02/17/1022759/{width}/{height}/1-1022759.jpg",
        "type": "IMAGE_SET",
        "caption": "ثنائية مان يونايتد حملت توقيع لوكاكو",
        "id": "1022759",
        "urlFriendlySuffix": "ثنائية-مان-يونايتد-حملت-توقيع-لوكاكو",
        "autoPlay": false
        },
        "lastEditDate": "2018-02-17T20:12:08Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "اليونايتد-ربع-نهائي-كأس-الاتحاد-وجدل-تقنية-الفيديو"
        },
        {
        "id": "1000806",
        "self": "/my_site_api_url/rest/v2/article/1000806.json",
        "revision": "2017-11-30T08:11:28Z",
        "date": "2017-11-30T08:11:28Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "صلاح يتخطى ميسي ورونالدو ويحرج العملاق البلجيكي",
        "summary": "\"ولكن هل يستطيع أن يفعلها بليلة باردة في ستوك؟\".. تلك كانت جملة شهيرة للمحلل الإنجليزي آندي غراي، الذي أكد أن نجوم العالم لن يكونوا بنفس التألق، عندما يلعبون في ملاعب البريميرليغ الشرسة والباردة، مثل ملعب بريتانيا لنادي ستوك سيتي.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/11/30/1000808/{width}/{height}/1-1000808.jpg",
        "type": "IMAGE_SET",
        "caption": "كعب صلاح يعلو في القارة العجوز",
        "id": "1000808",
        "urlFriendlySuffix": "كعب-صلاح-يعلو-القارة-العجوز",
        "autoPlay": false
        },
        "lastEditDate": "2017-11-30T08:11:28Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "صلاح-يتخطى-ميسي-ورونالدو-ويحرج-العملاق-البلجيكي"
        },
        {
        "id": "973948",
        "self": "/my_site_api_url/rest/v2/article/973948.json",
        "revision": "2017-08-19T15:57:41Z",
        "date": "2017-08-19T13:44:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "مان يونايتد يقضي على سوانزي بأربع دقائق",
        "summary": "حقق مانشستر يونايتد انتصارا كبيرا بنتيجة 4-0 على مضيفه نادي سوانزي، في الجولة الثانية من الدوري الإنجليزي الممتاز.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/08/19/973947/{width}/{height}/1-973947.JPG",
        "type": "IMAGE_SET",
        "caption": "كتيبة يونايتد سحقت سوانزي",
        "id": "973947",
        "urlFriendlySuffix": "كتيبة-يونايتد-سحقت-سوانزي",
        "autoPlay": false
        },
        "lastEditDate": "2017-08-19T13:44:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مان-يونايتد-يقضي-سوانزي-بأربع-دقائق"
        },
        {
        "id": "965012",
        "self": "/my_site_api_url/rest/v2/article/965012.json",
        "revision": "2017-07-16T08:15:21Z",
        "date": "2017-07-16T08:15:21Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "إشادة بلوكاكو \"غير المهووس\" في مان يونايتد",
        "summary": "تألق مهاجم مانشستر يونايتد الجديد، روميلو لوكاكو، في مباراة فريقه التي انتهت السبت بالفوز 5-2 على لوس أنجلوس غالاكسي الأميركي، على الرغم من عدم تسجيله أي هدف.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/16/965011/{width}/{height}/1-965011.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو أثناء المباراة الودية مع لوس أنجلوس",
        "id": "965011",
        "urlFriendlySuffix": "لوكاكو-أثناء-المباراة-الودية-لوس-أنجلوس",
        "autoPlay": false
        },
        "lastEditDate": "2017-07-16T08:15:21Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "مورينيو-سعيد-مباراة-لوكاكو-الأولى"
        },
        {
        "id": "964816",
        "self": "/my_site_api_url/rest/v2/video/964816.json",
        "revision": "2017-07-15T11:50:17Z",
        "date": "2017-07-15T11:50:17Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "مورينيو: نسعى لضم مزيد من اللاعبين",
        "summary": "عزز مانشستر يونايتد صفوفه بضم كل من المهاجم البلجيكي لوكاكو، والمدافع السويدي فيكتور لينديلوف. وقال مدرب الفريق مدرب الفريق جوزيه مورينيو إن النادي لن يكتفي بلوكاكو وليندولف، وسيسعى لضم لاعبين آخرين.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/15/964822/{width}/{height}/1-964822.jpg",
        "type": "IMAGE_SET",
        "caption": "مدرب مان يونايتد جوزيه مورينيو",
        "id": "964822",
        "urlFriendlySuffix": "مدرب-مان-يونايتد-جوزيه-مورينيو",
        "autoPlay": false
        },
        "runTime": "00:00:16:07",
        "videoBulletin": false,
        "lastEditDate": "2017-07-15T11:50:17Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/964816",
        "urlFriendlySuffix": "مورينيو-نسعى-لضم-مزيد-اللاعبين",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "962511",
        "self": "/my_site_api_url/rest/v2/video/962511.json",
        "revision": "2017-07-06T18:09:03Z",
        "date": "2017-07-06T18:09:03Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "اتفاق لضم لوكاكو لمانشستر يونايتد",
        "summary": "نجح نادي مانشستر يونايتد، في التوصل لاتفاق من أجل ضم البلجيكي روميلو لوكاكو من إفرتون، بحسب ما كشفت شبكة سكاي سبورتس.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/07/06/962516/{width}/{height}/1-962516.jpg",
        "type": "IMAGE_SET",
        "caption": "اتفاق لضم لوكاكو لمانشستر يونايتد",
        "id": "962516",
        "urlFriendlySuffix": "اتفاق-لضم-لوكاكو-لمانشستر-يونايتد",
        "autoPlay": false
        },
        "runTime": "00:01:47:18",
        "videoBulletin": false,
        "lastEditDate": "2017-07-06T18:09:03Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/962511",
        "urlFriendlySuffix": "اتفاق-لضم-لوكاكو-لمانشستر-يونايتد",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "955096",
        "self": "/my_site_api_url/rest/v2/video/955096.json",
        "revision": "2017-06-07T08:52:08Z",
        "date": "2017-06-07T08:52:08Z",
        "type": "VIDEO",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "headline": "لوكاكو يعلن الرحيل عن إفرتون",
        "summary": "أكد المهاجم البلجيكي روميلو لوكاكو بأنه قد حسم مصيره النهائي وحدد وجهته الجديدة في الموسم المقبل. وقرر لوكاكو وضع حد لمسيرته مع إفرتون ليرحل عن النادي في الانتقالات الصيفية المقبلة.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2017/06/07/955123/{width}/{height}/1-955123.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو يعلن الرحيل عن إفرتون",
        "id": "955123",
        "urlFriendlySuffix": "لوكاكو-يعلن-الرحيل-إفرتون",
        "autoPlay": false
        },
        "runTime": "00:00:35:00",
        "videoBulletin": false,
        "lastEditDate": "2017-06-07T08:52:08Z",
        "sectionUrl": "/sport",
        "category": "رياضة",
        "shareUrl": "https://www.skynewsarabia.com/video/955096",
        "urlFriendlySuffix": "لوكاكو-يعلن-الرحيل-إفرتون",
        "hasThumbnail": false,
        "is360Video": false
        },
        {
        "id": "891108",
        "self": "/my_site_api_url/rest/v2/article/891108.json",
        "revision": "2016-11-09T19:02:26Z",
        "date": "2016-11-09T19:02:26Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "من كومان إلى لوكاكو: مكانك ليس هنا",
        "summary": "قال مدرب إيفرتون، رونالد كومان، الأربعاء، إن مهاجمه روميلو لوكاكو سيتعين عليه ترك الفريق المنافس في الدوري الإنجليزي الممتاز لكرة القدم ليكمل تطوره.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2015/09/29/778517/{width}/{height}/1-778517.jpg",
        "type": "IMAGE_SET",
        "caption": "المهاجم البلجيكي روميلو لوكاكو",
        "id": "778517",
        "urlFriendlySuffix": "المهاجم-البلجيكي-روميلو-لوكاكو",
        "autoPlay": false
        },
        "lastEditDate": "2016-11-09T19:02:26Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "كومان-للوكاكو-مكانك-خارج-إيفرتون"
        },
        {
        "id": "797481",
        "self": "/my_site_api_url/rest/v2/article/797481.json",
        "revision": "2015-12-08T01:39:30Z",
        "date": "2015-12-08T01:39:30Z",
        "type": "ARTICLE",
        "section": "6",
        "defaultSectionTitle": "رياضة",
        "category": "رياضة",
        "headline": "لوكاكو ينقذ إيفرتون من هزيمة أمام كريستال بالاس",
        "summary": "أحرز المهاجم البلجيكي روميلو لوكاكو هدفا في الدقائق الأخيرة ليقود إيفرتون للتعادل بهدف لمثله مع كريستال بالاس في الدوري الإنجليزي الممتاز لكرة القدم يوم الاثنين.",
        "isBreaking": false,
        "mediaAsset": {
        "imageUrl": "/2015/12/08/797480/{width}/{height}/1-797480.jpg",
        "type": "IMAGE_SET",
        "caption": "لوكاكو محتفلا بهدف التعادل في مرمى كريستال بالاس",
        "id": "797480",
        "urlFriendlySuffix": "لوكاكو-محتفلا-بهدف-التعادل-مرمى-كريستال-بالاس",
        "autoPlay": false
        },
        "lastEditDate": "2015-12-08T01:39:30Z",
        "sectionUrl": "/sport",
        "urlFriendlySuffix": "لوكاكو-ينقذ-إيفرتون-هزيمة-أمام-كريستال-بالاس"
        }
    ],
"countsPerType": {
"ARTICLE": 9,
"IMAGE_GALLERY": 0,
"VIDEO": 3,
"BLOG": 0,
"INFOGRAPHIC": 0,
"LIVE_FEED": 0
},
"countsPerSection": {
"Middle_East": 0,
"Business": 0,
"Varieties": 0,
"Sport": 12,
"World": 0,
"Technology": 0
}
}

另外，我對這部分感到困惑https://ampbyexample.com/json/more_related_tags_page我不明白這個 URL 是需要創建這個頁面還是其他什么？

首先，我嘗試將示例作為文檔與他們的 API 一起使用，但是當我開始在其上實現我的 API 時，它無法正常工作

1 個解決方案

解決方案1
 1 已采納  2018-03-21 13:51:57

在您的回復中將“contentItems”重命名為“items”，它會對您有所幫助。 默認情況下，響應必須有一個數組“items”。 在這里閱讀更多“屬性”文章，“項目（可選）”子句

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 顯示更多按鈕不適用於我的桌子 AMP-顯示更多或更少的動態列表選項 AMP Carousel 不適用於多個項目 在 AMP 中的點擊按鈕上顯示和隱藏圖像 如果Google amp中的表單為空，則顯示錯誤消息 AMP表單響應在Google緩存中不起作用 無序列表按鈕，用於顯示更多/更少在第二個列表上不起作用 顯示更多按鈕 在 html 中顯示更多按鈕 組件按鈕先顯示n個div元素，然后再顯示n個其他元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM