常見的使用案例是,按一下內容版面配置內的連結後,以動態搜尋查詢方式瀏覽至搜尋頁面。
例如,假設想要在按一下內容版面配置中的「此作者的更多文章」連結並傳送搜尋有效負載後,瀏覽至「作者」搜尋頁面。以下程式碼將可達成此目的。請注意,在網站頁面內執行時,可以在內容版面配置中使用 SCS
和 SCSRenderAPI
全域物件。
$('.more-from-author').click($.proxy(function () { var childrenPages = SCS.structureMap[SCS.navigationRoot].children; if (!childrenPages) return; // No pages // Find the Authors page for (var i = 0; i < childrenPages.length; i++) { var page = SCS.structureMap[childrenPages[i]]; if (page.name === 'Authors') { var linkData = SCSRenderAPI.getPageLinkData(page.id); if (linkData && linkData.href) { var href = linkData.href, searchPayload = content.author_id + '*', contentType = "Starter-Blog-Post"; // if both the page URL and the search query exists, navigate to the page passing in the query if (href && searchPayload) { var queryStart = href.indexOf('?') === -1 ? '?' : '&'; // add in the contentType and search parameters // contentType isn't a required URL parameter // Payload contains search string only. No parameter name. href += queryStart + (contentType ? 'contentType=' + contentType + '&' : '') + 'q=' + searchPayload; // navigate to the search results page window.location = href; } } } } }, this));
如果希望在相同頁面中多次重複使用同樣的內容版面配置,最好在 CSS 選取器中使用唯一 ID,而不要使用類別選取器,像是 $('.more-from-author').click(…)
。
例如:
template.html <div id="{{navigateId}}">….</div> render.js content.navigateId = this.scsData.id + 'detailTrigger'; $('#' + navigateId).click(…)