Criar um Layout de Seção que Suporte Carga Ociosa

A lista de conteúdo pode chamar o layout de seção com componentes adicionais conforme eles são consultados.

Quando você renderiza uma lista de conteúdo, tem a opção de selecionar um layout de seção para renderizar todos os itens de conteúdo retornados. Isso permite que você crie vários layouts diferentes para os itens de conteúdo, como uma tabela, um controle deslizante ou um layout de oito colunas. Esses layouts de seção personalizados também podem fazer parte das funcionalidades de paginação mais avançadas.

As listas de conteúdo suportam a seguinte paginação:

  • Paginação
  • Carregar na rolagem
  • Carregar ao clicar

Para a funcionalidade de paginação padrão, o layout de seção não precisa fazer nada. Ele será renderizado novamente com o próximo conjunto de itens quando o usuário clicar na próxima página. No entanto, para Carregar na rolagem e Carregar ao clicar, em vez de ter o layout de seção novamente renderizado, mais componentes são adicionados ao layout de seção. Isso é usado na maioria das vezes no modelo de rolagem infinita, em que você carrega os n primeiros itens e, conforme o usuário rola a página para baixo, você extrai e renderiza o próximo conjunto de itens. Para suportar Carregar na rolagem e Carregar ao clicar, o layout de seção personalizado precisa fazer

  1. render.js: implementar a API addComponent(). Isso será chamado com cada novo componente que deve ser adicionado ao layout de seção.

    // dynamic API for adding additional components through "load more" when used in a Content List
               addComponent: function (parentObj, component) {     
                   // create the component div and add it to the parent object
                   $(parentObj).append(this.createComponentDiv(component)); 
               }
  2. appInfo.json: incluir o seguinte para permitir que a lista de conteúdo saiba que o layout de seção suporta addComponent() api.

    "contentListData": {  
      "addComponent": true
    },

Após a atualização do arquivo appInfo.json, quando o usuário selecionar esse layout de seção no painel de definições e ir para a tela de paginação, ele verá as opções Carregar ao clicar e Carregar na rolagem.