Criar uma Disposição de Secção Que Suporte o Carregamento em Modo Lazy

A lista de conteúdos pode chamar a disposição da secção com componentes adicionais conforme são consultados.

Quando renderiza uma lista de conteúdos, pode optar por selecionar uma disposição de secção para renderizar todos os itens de conteúdo devolvidos. Deste modo, pode criar várias disposições diferentes para os itens de conteúdo, como uma tabela, um cursor de deslocação ou uma disposição de oito colunas. Estas disposições de secção customizadas também podem fazer parte das funcionalidades de paginação mais avançadas.

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

  • Paginação
  • Carregar ao deslocar
  • Carregar ao clicar

Para a funcionalidade de paginação standard, a disposição da secção não precisa de fazer nada. Será renderizada novamente com o conjunto de itens seguinte quando o utilizador clicar na página seguinte. Contudo, para Carregar ao deslocar e Carregar ao clicar, em vez de renderizar novamente a disposição da secção, são acrescentados componentes adicionais à disposição da secção. Isto é utilizado principalmente para o modelo de deslocação infinita, em que os primeiros n itens são carregados e, à medida que o utilizador se desloca para baixo na página, é extraído e renderizado o conjunto de itens seguinte. Para suportar Carregar ao deslocar e Carregar ao clicar, a disposição da secção customizada necessita de:

  1. render.js: Implementar a API addComponent(). Esta será chamada com cada novo componente a acrescentar à disposição da secçã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 indicar à lista de conteúdos que a disposição da secção suporta addComponent() api.

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

Assim que o appInfo.json for atualizado, quando o utilizador selecionar esta disposição da secção no painel de definições e aceder ao ecrã da paginação, verá as opções Carregar ao clicar e Carregar ao deslocar.