Espandere le macro nelle query lista di contenuti

Proprietà componente supportate

Di seguito sono riportate le proprietà che supportano la sintassi del modello Mustache JS.

• Lista di contenuto

  • Stringa query aggiuntiva

  • Ad esempio: updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

• Titolo/Paragrafo/Testo

  • Rich Text immesso tramite CKEditor

  • Ad esempio: "Content REST API format for date: {{#content.date}}now{{/content.date}}"

Sintassi componente supportata

L'oggetto content.date usufruisce di supporto integrato. Questo oggetto dispone di due parametri principali, today e now.

Il valore today acquisisce l'ora corrente del browser, la converte nel formato mezzanotte del giorno, quindi converte il valore nell'ora UTC (Coordinated Universal Time).

• {{#content.date}}today{{/content.date}} viene espanso nel valore del browser per la mezzanotte del giorno, convertito nel valore UTC e formattato con il formato data dell'interfaccia API REST di contenuto. Ad esempio:

  2220181008065959999

• Può essere aumentato con:

  today +/-  [day | week | month | year]

• Il valore today funziona inoltre in modo diverso quando vi si indicano operazioni di addizione o sottrazione. Quando si esegue una sottrazione, utilizzerà l'ora antimeridiana. Quando si esegue un'addizione, utilizzerà l'ora alla mezzanotte. Ad esempio:

  • {{#content.date}}today - 1 day{{/content.date}} viene espanso all'inizio del giorno precedente.

  • {{#content.date}}today + 2 days{{/content.date}} viene espanso al giorno successivo a domani a mezzanotte.

Il valore now acquisisce l'ora corrente del browser e la converte nell'ora UTC senza alcuna regolazione.

• {{#content.date}}now{{/content.date}} viene espanso all'ora corrente del browser convertita nel valore UTC e formattata con il formato data dell'interfaccia API REST di contenuto.

• now può essere inoltre aumentato con hour. In questo caso si avrà:

  now +/-  [hour | day | week | month | year]

• Ad esempio:

  • {{#content.date}}now + 2 hours{{/content.date}}: due ore a partire da adesso convertite nell'ora UTC formattata con il formato data dell'interfaccia API REST di contenuto

  • {{#content.date}}now - 1 day{{/content.date}}: ieri a questa ora del browser convertita all'ora UTC formattata con il formato data dell'interfaccia API REST di contenuto

Uso della sintassi componente supportata

Per utilizzare l'espansione della macro nella stringa di query aggiuntiva, supponendo di voler restituire tutti gli elementi delle ultime 3 settimane, immettere quanto segue:

updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"

Viene restituita solo la data, pertanto per lavorare sulla chiamata dell'API REST di contenuto vengono aggiunte le virgolette quando si costruisce la stringa di query come si farebbe durante l'immissione di un valore statico.

MustacheJS

Per la sintassi, fare riferimento alle pagine del modello Mustache JS in mustache.github.io/mustache.5.html.

È stata apportata una modifica all'istanza di Mustache che viene eseguita quando si espandono le stringhe. In Mustache è disponibile sia un'espansione text che utilizza {{ }} che un'espansione html che utilizza {{{ }}}. La differenza tra le due espansioni consiste nel fatto che l'espansione text applica una codifica HTML alla stringa: se cioè il valore viene espanso a a < b, il risultato sarebbe a < b. Questo non è ciò che si vorrebbe per costruire le stringhe per gli URL. Si potrebbe suggerire all'utente di utilizzare l'espansione HTML, ma si tratterebbe solo di un sovraccarico che creerebbe altri problemi, come ad esempio spiegare perché è necessario utilizzare {{{ }}}.

Per evitare tali problemi, Mustache è stato impostato in modo che non salti i valori quando si utilizza {{ }}. Ciò significa che {{ }} e {{{ }}} funzionano allo stesso modo. La codifica di qualsiasi risultato viene lasciata come esercizio per l'utente, se necessario.

Modello Mustache OOTB

Mustache richiede l'applicazione di un modello al modello per l'espansione. Nell'esempio precedente, la definizione {{#content.date}} è già integrata, mentre una nuova proprietà, quale {{person}}, può essere aggiunta dallo sviluppatore. Se l'utente immette nel modello Mustache un valore assente nel modello, il risultato sarà una stringa vuota. Nel caso di Hello {{person}} è preferibile espandere solo Hello a meno che lo sviluppatore non aggiunga person al modello.

L'oggetto modello utilizzato è un modello globale denominato SCSMacros. Lo sviluppatore può aggiungere qualsiasi voce supplementare a questo oggetto. L'oggetto verrà passato a Mustache durante la valutazione del modello.

L'oggetto modello integrato attualmente supporta solo l'oggetto content.date:

{   
   content: {
     date: <lambda implementation>
   }
}

Modello Mustache personalizzato

Gli oggetti supportati possono essere migliorati dallo sviluppatore in base alle esigenze. Può introdurre un oggetto lastTwoDays e semplificare l'espansione solo a {{lastTwoDays}}.

Per estendere il modello e supportare elementi quali Hello {{person}} nell'esempio precedente, sarebbe necessario aggiungere l'oggetto person all'oggetto SCSMacros. Questa operazione deve essere effettuata prima dell'esecuzione della pagina. Può essere effettuata nel layout di pagina mediante l'aggiunta di una tag script all'inizio. Ad esempio:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
window.SCSMacros.person = "World";
</script>

Dopo aver apportato questa modifica, il modello Hello {{person}} verrebbe espanso in Hello World.

Se si desidera passare valori all'oggetto (ad esempio Hello {{#person}}personId{{/person}}), è necessario implementare mustache lambda nonché racchiudere ed espandere il valore all'interno dell'implementazione.

Ad esempio:

<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>

Dopo aver apportato questa modifica, il modello Hello {{#person}}111{{/person}} verrebbe espanso in Hello Small e il modello Hello {{#person}}222{{/person}} verrebbe espanso in Hello Big.