Opzione di espressione Sight

Question

Stavo osservando le opzioni di espressione utilizzate a vista. Ho provato la riga di codice qui sotto, ma sembra che il testo venga semplicemente visualizzato sulla pagina, qualcuno può fornire l'uso di opzioni con alcuni buoni esempi.

${'Assets' @ i18n, locale='fr-CH', hint='Translation Hint'} 
    ${'Page {0} of {1}' @ format = [count,total] } 

ho provato e capire il codice qui sotto per includere le PARSYS

<div data-sly-resource ="${@path='question_list', resourceType='wcm/foundation/components/parsys'}"></div> 

Anche da dove posso ottenere l'intero elenco di [elementi] data-sly-.

Grazie

Answer 1

Opzioni nelle espressioni sightly possono avere due diversi tipi di utilizzo:

1. Essi possono agire come le istruzioni che elaborano l'output di espressione, come una funzione avrebbe fatto.
2. Quando l'espressione si trova in un'istruzione data-sly- *, consente di fornire istruzioni o parametri a tale istruzione.

Nota: per provare facilmente fuori gli esempi forniti di seguito, è possibile installare i REPL tool sull'istanza AEM.

Su un'espressione semplice (che non si trova in una dichiarazione data-sly-*), seguenti opzioni sono possibili:

• format: Concatena stringhe.
  Esempio: ${'Page {0} of {1}' @ format = [1, 10]}
  Displays: Page 1 of 10
• i18n: Traduce stringhe. Inoltre, locale consente di modificare la lingua se è necessario adottare una lingua diversa dalla lingua corrente e hint consente di fornire assistenza al traduttore e di distinguere stringhe che potrebbero essere identiche ma con significati diversi.
  Esempio: ${'Number' @ i18n, locale = 'de', hint = 'Media DPS Folio Number'}
  Display: Nummer
• join: Definisce il delimitatore stringa da visualizzare tra gli elementi di un array.
  Esempio: ${['foo', 'bar'] @ join = '-'}
  Displays: foo-bar
• context: di controllo che le fughe di codice HTML e si applica la protezione XSS.
  Esempio: ${'<p>Hi!</p><script>alert("hack!")</script>' @ context = 'html'}
  Displays: <p>Hi!</p>

seguenti dichiarazioni consentono le opzioni di espressione, come riportato sopra, perché queste affermazioni sono simile a scrivere l'espressione, senza dichiarazione:

• data-sly-text:
  Questo esempio: <p data-sly-text="${currentPage.title}">Lorem ipsum</p>
  È equivalente a: <p>${currentPage.title}</p>
  (Questo può essere utile se si desidera lasciare i segnaposto fornite dal progettista HTML nella marcatura.)
  Quindi questo esempio: <p data-sly-text="${'Page {0} of {1}' @ format = [1, 10]}"></p>
  Displays: <p>Page 1 of 10</p>
• data-sly-attribute:
  questo esempio: <p href="#" data-sly-attribute.href="${currentPage.path}"></p>
  È equivalente a: <p href="${currentPage.path}"></p>
  (Ciò può essere utile per scrivere codice HTML valido in quanto il validatore HTML5 W3C verifica che gli URL siano costruiti correttamente. Inoltre, consente di lasciare i segnaposto fornite dal progettista HTML nella marcatura)
  Quindi questo esempio:. <p data-sly-attribute.title="${['foo', 'bar'] @ join = '-'}"></p>
  Displays: <p title="foo-bar"></p>
  noti che-sly-attributo di dati può anche essere usato per impostare più attributi, fornendo una chiave iterabile -valore dell'oggetto, come nell'esempio qui sotto. Ma questo uso dei dati-sly-attributo non permette di utilizzare tutte le opzioni: <div data-sly-attribute="${properties}"></div>

seguenti dichiarazioni accettare tutte le opzioni di espressione in quanto consentono di passare parametri denominati:

• data-sly-use:
  Esempio: <p data-sly-use.bar="${'logic.js' @ foo = 'hello'}">${bar}</p>
  logic.js: use(function() { return this.foo + " world"; });
  Display: <p>hello world</p>
• data-sly-template and data-sly-call:
  Esempio:
  <template data-sly-template.tmpl="${@ foo}">${foo} world</template>
<p data-sly-call="${tmpl @ foo = 'hello'}"></p>
  Displays: <p>hello world</p>

seguenti dichiarazioni consentono un elenco personalizzato di opzioni:

• data-sly-include:
  Si noti che: <div data-sly-include="${ @ path = 'path/to/template.html'}"></div>
  è equivalente a: <div data-sly-include="${'path/to/template.html'}"></div>
  O anche a: <div data-sly-include="path/to/template.html"></div>
  (avevo sempre optare per il modulo di scrittura più corta.)
  Opzioni per i dati-sornione-include (diverso path) sono:
  • prependPath: aggiunge qualcosa prima del percorso.
  • appendPath: Aggiunge qualcosa dopo il percorso.
  • wcmmode: Modifica il WCM mode per il file incluso.
• data-sly-resource:
  Anche qui il modulo di scrittura breve è: <div data-sly-resource="par"></div>
  Come per data-sly-include, ma accetta inoltre seguenti opzioni:
  • selettori: Per sostituire i selettori.
  • addSelector: Per aggiungere selettori.
  • removeSelectors: Per rimuovere i selettori.
  • resourceType: Per definire o modificare il tipo di risorsa (necessario solo se non è già definito come necessario nel nodo di contenuto).
  • decorationTagName e cssClassName: Per compatibilità con il modo AEM aggiunto elementi DIV intorno inclusa componenti JSP.

E seguenti dichiarazioni consentono alcuna opzione di espressione:

• data-sly-test
• data-sly-list
• data-sly-unwrap
• data-sly-element