Opcja ekspresji Wzrokowo

Question

Sprawdzałem opcje wyrażania używane w sposób widoczny. Próbowałem poniżej linii kodu, ale wydaje się po prostu wyrenderować tekst na stronie, czy ktoś może użyć opcji z kilkoma dobrymi przykładami.

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

Próbowałem i zrozumieć poniższy kod aby zawierać parsys

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

także skąd mogę dostać całą listę [elementy] Dane-sly-.

Dzięki

Answer 1

opcji w wyrażeniach sightly może mieć dwa różne rodzaje wykorzystania:

1. Mogą one działać jako instrukcji, które przetwarzają dane wyjściowe wyrażenia, jak funkcja będzie.
2. Gdy wyrażenie znajduje się w instrukcji danych-sly- *, pozwala na dostarczenie instrukcji lub parametrów do tego polecenia.

Uwaga: łatwo wypróbować przykłady podane poniżej, można zainstalować na przykład REPL tool AEM.

na prostym wyrażeniu (który nie znajduje się w data-sly-* rachunku), możliwe są następujące opcje:

• format: konkatenację ciągów.
  przykład: ${'Page {0} of {1}' @ format = [1, 10]}
  wyświetla: Page 1 of 10
• i18n: Tłumaczy strun. Dodatkowo, locale pozwala zmienić język, jeśli ma być inny język do bieżącej strony, a hint pozwala na pomoc tłumaczowi i rozróżnienie łańcuchów, które mogą być identyczne, ale mają różne znaczenia.
  przykład: ${'Number' @ i18n, locale = 'de', hint = 'Media DPS Folio Number'}
  wyświetla: Nummer
• join: Określa ogranicznik ciągu wyświetlania pomiędzy elementami w macierzy.
  Przykład: ${['foo', 'bar'] @ join = '-'}
  Wyświetla: foo-bar
• context: sterowania jak ucieczki HTML i stosuje ochronę XSS.
  Przykład: ${'<p>Hi!</p><script>alert("hack!")</script>' @ context = 'html'}
  Wyświetla: <p>Hi!</p>

Poniższe stwierdzenia umożliwiają opcje ekspresji wymienionych powyżej, ponieważ oświadczenia te są podobne do pisania wyrażenie bez rachunku:

• data-sly-text:
  Ten przykład: <p data-sly-text="${currentPage.title}">Lorem ipsum</p>
  Jest odpowiednikiem: <p>${currentPage.title}</p>
  (może to być przydatne, jeśli chcesz zostawić zastępcze przewidziane przez projektanta HTML w znacznikach.)
  Więc ten przykład: <p data-sly-text="${'Page {0} of {1}' @ format = [1, 10]}"></p>
  Wyświetla: <p>Page 1 of 10</p>
• data-sly-attribute:
  Przykład: <p href="#" data-sly-attribute.href="${currentPage.path}"></p>
  Jest odpowiednikiem: <p href="${currentPage.path}"></p>
  (Może to być przydatne przy pisaniu prawidłowego HTML, ponieważ weryfikator W3C HTML5 sprawdza, czy adresy URL są poprawnie skonstruowane. Ponadto pozwala opuścić zastępcze przewidziane przez projektanta HTML w znacznikach)
  Więc ten przykład. <p data-sly-attribute.title="${['foo', 'bar'] @ join = '-'}"></p>
  Wyświetla: <p title="foo-bar"></p>
  Należy pamiętać, że data-sly-atrybut może być również używany do ustawiania wielu atrybutów poprzez dostarczenie klucza iterowalny -wartość obiektu, jak w poniższym przykładzie. Ale to wykorzystanie danych-chytrym atrybut nie pozwala używać opcji: <div data-sly-attribute="${properties}"></div>

poniższych stwierdzeń akceptować żadnych możliwości ekspresji, ponieważ pozwalają przejść nazwanych parametrów:

• data-sly-use:
  przykład: <p data-sly-use.bar="${'logic.js' @ foo = 'hello'}">${bar}</p>
  logic.js: use(function() { return this.foo + " world"; });
  komunikat: <p>hello world</p>
• data-sly-template and data-sly-call:
  Przykład:
  <template data-sly-template.tmpl="${@ foo}">${foo} world</template>
<p data-sly-call="${tmpl @ foo = 'hello'}"></p>
  Wyświetla: <p>hello world</p>

Poniższe stwierdzenia umożliwiają niestandardową listę opcji:

• data-sly-include:
  Zauważ, że: <div data-sly-include="${ @ path = 'path/to/template.html'}"></div>
  jest równoznaczne z: <div data-sly-include="${'path/to/template.html'}"></div>
  lub nawet: <div data-sly-include="path/to/template.html"></div>
  (ja zawsze zdecydować się na krótszej formie pisemnej.)
  Opcje dla danych chytry obejmują (inne niż path) są:
  • prependPath: Dodaje coś przed ścieżką.
  • appendPath: Dodaje coś po ścieżce.
  • wcmmode: Zmienia WCM mode dla dołączonego pliku.
• data-sly-resource:
  Tutaj zbyt krótka forma pisania jest: <div data-sly-resource="par"></div>
  samo jak dla data-sly-include, ale dodatkowo akceptuje następujące opcje:
  • selektorów: aby zastąpić selektorów.
  • addSelectors: Aby dodać selektory.
  • remove Selektory: Aby usunąć selektory.
  • resourceType: Aby zdefiniować lub zmienić typ zasobu (wymagany tylko, jeśli nie jest jeszcze zdefiniowany jako wymagany w węźle treści).
  • decorationTagName i cssClassName: Ze względu na kompatybilność wsteczną ze sposobem, w jaki AEM dodał elementy DIV wokół dołączonych komponentów w JSP.

I Poniższe stwierdzenia umożliwiają żadnych opcji wyrażenie:

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