Centrum wsparcia Workiva

Szablony Handlebars obsługują szereg funkcji, które mogą pomóc w prawidłowym renderowaniu twojego tekstu. W tym artykule omówimy niektóre z najpopularniejszych funkcji i sposób ich wykorzystania w Workiva.

Uwaga: Chociaż wymieniamy tutaj każdą funkcję osobno, wiele funkcji Handlebars można "układać" lub używać w ramach innej funkcji.

KAŻDY

Funkcja EACH jest najczęściej używana i przeznaczona do przetwarzania JSON. Funkcja zapętla obiekt JSON lub tablicę; składnia funkcji wykorzystuje blok otwierający i zamykający. Każdy element tablicy jest dostępny do działania w bloku pętli EACH:

{{#each object}}
{{object element}}
{{/each}}

W poleceniach Render Text Template i Render File Template obiekt/tablica JSON do przetworzenia jest określony w sekcji JSON Variables:

Nazwa określona w sekcji JSON Variables polecenia jest używana w bloku otwierającym EACH szablonu. W przypadku prostej tablicy JSON, takiej jak poniższa, każdy klucz (Priority & Owner w poniższym przykładzie) jest dostępny do przetwarzania w pętli EACH:

[
 {
 "Nazwa właściciela": "Abby Steere",
 "Priorytet": "Wysoki"
 },
 {
 "Nazwa właściciela": "Jeff Hickey",
 "Priorytet": "Wysoki"
 },
 {
 "Nazwa właściciela": "Ryan Niebruegge",
 "Priorytet": "Wysoki"
 },
 {
 "Nazwa właściciela": "Ryan Niebruegge",
 "Priorytet": "Niski"
 },
 {
 "Nazwa właściciela": "Abby Steere",
 "Priorytet": "Średni"
 },
 {
 "Nazwa właściciela": "Jeff Hickey",
 "Priorytet": "Średni"
 },
 {
 "Nazwa właściciela": "Ryan Niebruegge",
 "Priorytet": "Średni"
 }
]

Przykład

Właściciel zadania, Priorytet zadania
{{#each object_items}}
{{Właściciel}},{{Priorytet}}
{{/each}}

Wyrenderowany wynik

Funkcja EACH może również przetwarzać bardziej złożone obiekty JSON, w tym te z zagnieżdżonymi tablicami.

Przykładowy obiekt JSON (lista produktów)

{
 "products": [
 {
 "id": 1,
 "title": "iPhone 14",
 "price": 799,
 "brand": "Apple",
 "category": "smartphones",
 "images": [
 "/products/1/1.jpg",
 "/products/1/2.jpg",
 "/products/1/3.jpg",
 "/products/1/4.jpg",
 "/products/1/thumbnail.jpg"
 ]
 },
 {
 "id": 2,
 "title": "iPhone 15",
 "price": 899,
 "brand": "Apple",
 "category": "smartphones",
 "images": [
 "/products/2/1.jpg",
 "/products/2/2.jpg",
 "/products/2/3.jpg",
 "/products/2/thumbnail.jpg"
 ]
 },
 {
 "id": 3,
 "title": "S23 Ultra",
 "price": 1249,
 "brand": "Samsung",
 "category": "smartphones",
 "images": [
 "/products/3/1.jpg"
 ]
 },
 {
 "id": 4,
 "title": "Pixel 8",
 "price": 799,
 "brand": "Google",
 "category": "smartphones",
 "images": [
 "/products/4/1.jpg",
 "/products/4/2.jpg",
 "/products/4/thumbnail.jpg"
 ]
 }
 ]
, "limit":100
, "total":4
, "hasmore":false
}

Przykład

W tym szablonie uzyskujemy dostęp do elementu w katalogu głównym (total), a także wykonujemy pętlę po tablicy (products) elementów:

Obiekt JSON ma {{response.total}} elementów:
{{#each response.products}}
{{title}}
{{/each}}

Wyrenderowany wynik

UNLESS i @FIRST / @LAST

Funkcja UNLESS jest najczęściej łączona z operatorami @FIRST lub @LAST w celu kontrolowania ostatecznego renderowanego wyniku.

Na przykład, podczas tworzenia listy wartości rozdzielanych przecinkami, przecinek jest zbędny po ostatnim elemencie listy. Łącząc UNLESS i @LAST, można łatwo wygenerować listę oddzieloną przecinkami, która nie kończy się przecinkiem.

Przykład

{{#each response.products}}{{title}}{{#unless @last}},{{/unless}}{{/each}}

Wyrenderowany wynik przy użyciu obiektu Product List

IF / ELSEIF / ELSE i EQUAL

Funkcje IF, ELSEIF i ELSE umożliwiają dodanie logiki do szablonu w celu uwzględnienia różnych scenariuszy. Użycie IF nie wymaga użycia ELSEIF lub ELSE, jeśli funkcje są również połączone z operatorami EQUAL. 

Operator równości może być używany do porównywania wartości tekstowych lub liczbowych. Podczas porównywania wartości tekstowych, jeśli jedna z wartości jest jawnie określona i nie jest pobierana ze zmiennej, musi być ujęta w cudzysłów.

Przykład

W tym przykładzie "marka" w funkcji JEŻELI jest pobierana ze zmiennej JSON. Podczas wykonywania zmienna jest zastępowana wartością w elemencie marki obiektu.

{{brand}},{{#if (equal brand "Apple")}}iOS{{else}}Android{{/if}}

Wyrenderowany wynik przy użyciu obiektu Product List

@KEY / THIS / @INDEX

Funkcje @KEY i THIS są przydatne podczas interakcji z obiektami JSON, w których nazwa klucza jest różna lub może nie być znana.

Funkcja @INDEX zwraca pozycję elementu przetwarzanego w każdej operacji.

Uwaga: Funkcja @INDEX jest oparta na zerze, więc pierwszy element na liście ma wartość indeksu 0, drugi indeks 1 itd.

Przykładowa treść JSON

Ta treść jest odpowiedzią na polecenie Get File Properties konektora Workiva:

{ 
 "created": "2023-11-20T21:02:09.000Z", 
 "id": "91af3ec18c554d5a81fd4ec4edc3a897", 
 "metadata": { 
 "account": {}, 
 "amount": { 
 "numberFormat": ",." 
 }, 
 "entity": {} 
 }, 
 "name": "Sample.csv", 
 "numRecords": 3, 
 "originalFileSize": 72, 
 "status": "IMPORTED", 
 "tableId": "d1463c30226445819b0dddf57226ccf7", 
 "tags": { 
 "WK-Chains-Source": "https://h.sandbox.wdesk.com/s/wdata/oc/app/workiva-chains/find/executor?chainId=95631\u0026chainExecutorId=4217258" 
 }, 
 "updated": "2023-11-20T21:02:18.000Z", 
 "userId": "V0ZVc2VyHzU1OTQwMTMxODMzMTE4NzI", 
 "version": 1 
}

Przykład

{{#each properties.tags}}
{{@key}},{{this}}
{{/each}}

Wyrenderowany wynik

Łączenie funkcji

Wszystkie funkcje opisane w tym artykule mogą być używane w połączeniu ze sobą. Funkcje EACH mogą być zagnieżdżane wewnątrz innych funkcji EACH; funkcje UNLESS, IF, @KEY, THIS lub @INDEX mogą być używane wewnątrz funkcji EACH do warunkowego kontrolowania renderowanych danych wyjściowych.  

Przykład

W tym szablonie połączono wiele funkcji w celu utworzenia tabeli w formacie HTML:

• Funkcja EACH jest używana do przeglądania produktów w pętli.
• @INDEX służy do pobierania pozycji produktu w tablicy.
• Funkcja JEŻELI ocenia markę produktu i warunkowo formatuje tekst.
• Zagnieżdżona instrukcja EACH przetwarza obrazy dla każdego produktu
• Instrukcja UNLESS dodaje podział wiersza (
  ) po każdym łączu obrazu (z wyjątkiem ostatniego na liście)

Wyrenderowany wynik

Tabela wynikowa wyświetlana na stronie internetowej lub w wiadomości e-mail zgodnej z HTML jest wyświetlana poniżej:

Dodatkowe zasoby

• Złącze kierownicy
• Polecenia kierownicy
• Zrozumienie kierownicy