Em uma consulta de lista de conteúdo, você pode definir valores para propriedades que são calculadas quando uma página é executada para exibir o conteúdo recém-atualizado.
A maioria das propriedades dos componentes nos sites é estática. O usuário seleciona ou digita uma string ou um valor fixo para uma das propriedades do componente e isso não muda, independentemente de quando ou onde a página seja executada. No entanto, você pode definir valores para propriedades que são calculadas quando uma página é executada. Isso é útil para exibir conteúdo que foi atualizado recentemente nas consultas de conteúdo. Os usuários podem digitar datas como "nos últimos 3 dias".
Você pode inserir uma expansão Mustache JS para diversas propriedades. Os valores referenciados nessas strings são derivados de um modelo que é executado quando a página é executada. Um modelo predefinido manipula datas formatadas para chamadas de API REST de Conteúdo. Você pode estender esse modelo com valores adicionais para atender a qualquer requisito do usuário.
Este é um exemplo da string que você pode digitar para uma propriedade:
Content List component: Additional Query String property: updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"
Essa entrada Mustache para a data será avaliada no runtime; assim, o valor retornado muda dependendo de quando é executado (isto é, expande para updatedDate gt "2220181002060000000"
). Dessa maneira, o usuário pode elaborar qualquer string de data complexa, em vez de ter de digitar um valor predefinido.
Propriedades Suportadas do Componente
As seguintes propriedades suportam a sintaxe do modelo Mustache JS:
Lista de Conteúdos
String de Consulta Adicional
Por exemplo: updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"
Título/Parágrafo/Texto
Rich text digitado via CKEditor
Por exemplo: "Content REST API format for date: {{#content.date}}now{{/content.date}}"
Nota:
Sem um modelo personalizado para o modelo Mustache, a expansão em Título/Parágrafo/Texto não é tão útil. No entanto, é muito útil para validar o que você digita na String de Consulta Adicional, porque será avaliado conforme você alterna entre edição e exibição e ficará imediatamente visível.Sintaxe Suportada do Componente
O objeto content.date
é suportado predefinido. Isso aceita dois parâmetros principais, today
e now
.
O valor today
assume o horário atual do browser, converte-o em meia-noite de hoje e, em seguida, converte esse valor no horário UTC.
{{#content.date}}today{{/content.date}}
expande para o valor do browser na meia-noite de hoje, convertido no valor do UTC e formatado no formato de data da API REST de Conteúdo. Por exemplo:
2220181008065959999
Ele então pode ser aumentado com:
today +/- [day | week | month | year]
O valor today
também se comporta de forma diferente quando você adiciona ou subtrai dele. Se você subtrair dele, ele usará o horário da manhã. Se você adicionar a ele, ele usará o horário da meia-noite. Por exemplo:
{{#content.date}}today - 1 day{{/content.date}}
expande para ontem no início do dia.
{{#content.date}}today + 2 days{{/content.date}}
expande para depois de amanhã à meia-noite.
O valor now
assume o horário atual do browser e converte-o no horário UTC sem qualquer ajuste.
{{#content.date}}now{{/content.date}}
expande para o horário atual do browser convertido no valor do UTC e formatado no formato de data da API REST de Conteúdo.
now
também pode ser aumentado com hour
. Então, você tem:
now +/- [hour | day | week | month | year]
{{#content.date}}now + 2 hours{{/content.date}}
- duas horas a partir de agora convertidas no horário UTC, no formato de data da API REST de Conteúdo
{{#content.date}}now - 1 day{{/content.date}}
- ontem neste horário do browser convertido no horário UTC, no formato de data da API REST de Conteúdo
Usando a Sintaxe Suportada do Componente
Para usar a macro expansão na string de consulta adicional, supondo que você queira retornar tudo nas últimas 3 semanas, você digitaria o seguinte:
updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"
Somente a data é retornada; então, para funcionar na chamada da API REST de Conteúdo, aspas são adicionadas quando você constrói a string de consulta, como faria ao digitar um valor estático.
MustacheJS
Para obter a sintaxe, consulte as páginas de modelos Mustache JS em mustache.github.io/mustache.5.html.
Foi feita uma alteração na instância Mustache que é executada ao expandir as strings. O Mustache fornece uma expansão text
que usa {{ }}
e uma expansão html
que usa {{{ }}}
. A diferença entre as duas é que a expansão de texto faz uma codificação HTML na string, ou seja, se o valor fosse expandido para a < b
, o resultado seria a < b
. Não é o que você gostaria para construir strings de URLs. Você poderia instruir o usuário a usar a expansão HTML, mas isso tem um custo e gerará mais problemas, como explicar por que é preciso usar {{{ }}}
.
Para evitar isso, o Mustache foi configurado para que não escape valores ao usar {{ }}
. Isso significa que {{ }}
e {{{ }}}
se comportam da mesma maneira. Isso também deixa a codificação de qualquer resultado como teste para o usuário se for necessário.
O Modelo Mustache do OOTB
O Mustache exige que um exemplar seja aplicado ao modelo para expansão. No exemplo anterior, {{#content.date}}
já está definido pronto para uso, enquanto uma nova propriedade, como {{person}}
, pode ser adicionada pelo desenvolvedor. Se o usuário digitar um valor no modelo Mustache que não está no exemplar, o resultado será uma string vazia. Assim, no caso de Hello {{person}}
, expandiria para apenas Hello
, a menos que o desenvolvedor adicionasse person
ao exemplar.
O objeto modelo usado é um objeto global chamado SCSMacros
. O desenvolvedor é livre para adicionar qualquer entrada a mais nesse objeto. O objeto será transmitido ao Mustache quando o modelo for avaliado.
O objeto modelo predefinido só aceita atualmente o objeto content.date
:
{ content: { date: <lambda implementation> } }
Modelo Mustache Personalizado
Os objetos suportados podem ser aprimorados pelo desenvolvedor com base nos requisitos. Por isso, eles podem introduzir um objeto lastTwoDays
e simplificar a expansão para apenas {{lastTwoDays}}
.
Para estender o modelo para suportar algo como Hello {{person}}
no exemplo anterior, você precisaria adicionar o objeto person
ao SCSMacros. Faça isso antes da execução da página. Pode ser feito no layout da página adicionando uma tag de script ao início dela. Por exemplo:
<script type="text/javascript"> window.SCSMacros = window.SCSMacros || {}; // define/get the SCSMacros object window.SCSMacros.person = "World"; </script>
Depois de fazer essa alteração, o modelo Hello {{person}}
expandiria para: Hello World
.
Se você quiser transmitir valores ao objeto (por exemplo, Hello {{#person}}personId{{/person}}
), implemente um mustache lambda
, encapsule e expanda o valor na implementação.
Por exemplo:
<script type="text/javascript"> window.SCSMacros = window.SCSMacros || {}; // define/get the SCSMacros object //implement "person" as a lambda window.SCSMacros.person = function () { var people = { '111': { firstName: 'Small', lastName: 'World'}, '222': { firstName: 'Big', lastName: 'Universe'} }; return function (text, render) { var expandedText = render(text); var chosenPerson = people[expandedText] || people['111']; return chosenPerson.firstName; } }; </script>
Depois que essa alteração é feita, o modelo Hello {{#person}}111{{/person}}
expande para Hello Small
e o modelo Hello {{#person}}222{{/person}}
expande para Hello Big
.
Nota:
A expansão Mustache é executada de maneira síncrona. Se você precisar recuperar valores assíncronos, elas precisarão ser resolvidos dentro do exemplar antes de você tentar executar a expansão mustache, mas isso não é suportado no momento, embora implementações personalizadas sejam possíveis.