Extinderea macrocomenzilor în interogările listelor de conţinut

Proprietăţi acceptate pentru componente

Următoarele proprietăţi acceptă sintaxa şabloanelor Mustache JS:

• Lista de conţinut

  • Şir de interogare suplimentar

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

• Titlu/Paragraf/Text

  • Text formatat, introdus cu CKEditor

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

Sintaxă acceptată pentru componente

Obiectul content.date este acceptat în mod prestabilit. Acesta este compus din doi parametri: today şi now.

Valoarea today preia ora curentă a browserului, o converteşte la ora 00:00 a zilei curente, apoi converteşte acea valoare la ora universală coordonată (UTC).

• {{#content.date}}today{{/content.date}} se expandează la valoarea browserului pentru ora 00:00 a zilei curente, convertită la valoarea UTC şi formatată conform formatului pentru dată din API-UL REST Content. De exemplu:

  2220181008065959999

• Apoi, aceasta poate fi augmentată cu:

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

• Valoarea today se comportă şi ea diferit atunci când adăugaţi valori la ea sau atunci când scădeţi valori din ea. Dacă scădeţi valori din ea, se vor utiliza ore din antemeridian. Dacă adăugaţi valori la ea, se va utiliza ora 00:00. De exemplu:

  • {{#content.date}}today - 1 day{{/content.date}} se expandează la începutul zilei de ieri.

  • {{#content.date}}today + 2 days{{/content.date}} se expandează la ora 00:00 a zilei de poimâine.

Valoarea now preia ora curentă a browserului şi o converteşte la ora UTC, fără nicio ajustare.

• {{#content.date}}now{{/content.date}} se expandează la ora curentă a browserului, convertită la valoarea UTC şi formatată conform formatului pentru dată din API-UL REST Content.

• Valoarea now poate fi augmentată şi ea, cu valoarea hour. Astfel, aveţi:

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

• De exemplu:

  • {{#content.date}}now + 2 hours{{/content.date}} - două ore de la momentul actual; ora este convertită la ora UTC, formatată conform formatului pentru dată din API-ul REST Content

  • {{#content.date}}now - 1 day{{/content.date}} - ziua de ieri, la ora acestui browser, convertită la ora UTC, formatată conform formatului pentru dată din API-ul REST Content

Utilizarea sintaxei acceptate pentru componente

Pentru a utiliza expandarea macrocomenzii în şirul suplimentar de interogare, să presupunem că doriţi să returnaţi toate evenimentele din ultimele 3 săptămâni. Pentru aceasta, veţi introduce următoarele:

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

Este returnată doar data. Aşadar, pentru a lucra asupra apelului către API-ul REST Content, trebuie adăugate ghilimele atunci când construiţi şirul de interogare, la fel cum aţi proceda la introducerea unei valori statice.

MustacheJS

În ceea ce priveşte sintaxa, consultaţi paginile şabloanelor Mustache JS, la adresa mustache.github.io/mustache.5.html.

S-a efectuat o modificare în ceea ce priveşte instanţa Mustache care este rulată la expandarea şirurilor. Mustache oferă atât o expandare text, care utilizează {{ }}, cât şi o expandare html, care utilizează {{{ }}}. Diferenţa dintre acestea două este că expandarea text efectuează o codificare în format HTML asupra şirului; cu alte cuvinte, dacă valoarea s-ar expanda la a < b, atunci rezultatul ar fi a < b. Nu acesta este modul în care aţi dori să construiţi şiruri pentru adresele URL. Aţi putea instrui utilizatorul să utilizeze expandarea HTML, însă aceasta reprezintă doar un cost indirect şi va genera mai multe probleme, ca şi când aţi explica utilizatorului că trebuie să utilizeze {{{ }}}.

Pentru a evita această situaţie, Mustache a fost configurat în aşa fel încât nu se pierde nicio valoare atunci când se utilizează {{ }}. Acest lucru înseamnă că atât {{ }}, cât şi {{{ }}} se comportă în acelaşi fel. În plus, în acest mod, codificarea oricărui rezultat rămâne ca un exerciţiu pentru utilizator, dacă este necesară.

Modelul OOTB Mustache

Mustache necesită un model pentru a fi aplicat la şablon în vederea expandării. În exemplul precedent, proprietatea {{#content.date}} este predefinită, iar dezvoltatorul poate adăuga o proprietate nouă, cum ar fi {{person}}. Dacă utilizatorul introduce în şablonul Mustache o valoare care nu face parte din model, va rezulta un şir gol. Astfel, în cazul şablonului Hello {{person}}, acesta se va expanda doar la Hello dacă dezvoltatorul nu adaugă proprietatea person la model.

Obiectul model utilizat este un obiect global, denumit SCSMacros. Dezvoltatorul poate adăuga orice intrări suplimentare în acest obiect. Obiectul va fi transmis către Mustache în momentul evaluării şablonului.

Pentru moment, obiectul model predefinit acceptă doar obiectul content.date:

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

Model Mustache personalizat

Obiectele acceptate pot fi îmbunătăţite de către dezvoltator, în funcţie de cerinţele acestuia. Astfel, dezvoltatorul poate introduce un obiect lastTwoDays şi poate simplifica expandarea la doar {{lastTwoDays}}.

Pentru a extinde modelul astfel încât să accepte un şablon de genul Hello {{person}} din exemplul precedent, va trebui să adăugaţi obiectul person la obiectul model SCSMacros. Trebuie să faceţi acest lucru înainte de rularea paginii. Acest lucru se poate realiza în macheta paginii, prin adăugarea unei etichete de script la începutul acesteia. De exemplu:

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

După efectuarea acestei modificări, şablonul Hello {{person}} s-ar extinde la: Hello World.

Dacă doriţi să transmiteţi valori către obiect (de exemplu, Hello {{#person}}personId{{/person}}), atunci trebuie să implementaţi un model mustache lambda, apoi să încadraţi şi să expandaţi valoarea în cadrul implementării.

De exemplu:

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

După efectuarea acestei modificări, şablonul Hello {{#person}}111{{/person}} ar urma să se expandeze la Hello Small, iar şablonul Hello {{#person}}222{{/person}} ar urma expandeze la Hello Big.