Um caso de uso comum seria navegar até uma página de pesquisa com uma consulta de pesquisa dinâmica, ao clicar em um link dentro de um layout de conteúdo.
Por exemplo, suponha que você queira navegar até uma página de pesquisa chamada "Authors" ao clicar no link "More articles from this author" em seu layout de conteúdo, informando um payload de pesquisa. O código a seguir fará isso. Observe que os objetos globais SCS
e SCSRenderAPI
estão disponíveis para uso no layout de conteúdo ao executar dentro de uma página do site.
$('.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));
Se você espera que o mesmo layout de conteúdo seja usado diversas vezes na mesma página, é melhor usar o ID exclusivo no seletor de CSS em vez do seletor de classe, como $('.more-from-author').click(…)
.
Por exemplo:
template.html <div id="{{navigateId}}">….</div> render.js content.navigateId = this.scsData.id + 'detailTrigger'; $('#' + navigateId).click(…)