Picture

Zdravím, jmenuji se Emil Cieslar.

Jsem programátor se zaměřením na frontend pomocí AngularJS. Backend mi také není cizí, na něj používám Nette (občas NodeJS). Stále se učím nové věci, které rád sdílím s ostatními. Žiji svým vlastním tempem ve společnosti Webkreativ, s.r.o., která má stejné zaměření jako já.

Více o mne →

 (Emil & Web)

Handlebars iterátor

Jak funguje each iterátor v handlebars

  • Handlebars
  • NodeJS

Vždy když používáte {{#each promenna}}...{{/each}} nesmíte zapomenout na to, že uvnitř tohoto bloku se dostáváte do jiné úrovně proměnné. V praxi to znamená, že když například projíždím pomocí each pole users, uvnitř each už jsem uprostřed pole users a adresuji už nižší úroveň. Kdybych chtěl adresovat proměnnou ve vyšší úrovni, musím se na tu vyšší úroveň nejdříve dostat za použití ../. Pojďme se podívat na příklad.

Tak například máme pole uživatelů users, které má více úrovní a vypadá v json následovně. Jako bonus k tomu máme ještě jednu proměnnou s dnešním datem date, která je o úroveň výš než např. user vlastnost uvnitř user objektu.

users = [
	user: {
		name: 'Emil Cieslar',
		age: 26
	},
	user: {
		name: 'Karel Veselý',
		age: 30
	}
]

date = '15/10/2015'

Takové pole budeme iterovat pomocí handlebars each.

{{#each users}}
  Jméno: {{user.name}}
{{/each}}

Pokud bychom chtěli uvnitř each vypsat ještě jinou proměnnou, která je o úroveň výše vůči této proměnné, museli bychom použít ../ jako v následujícím příkladu.

{{#each users}}
  Jméno: {{user.name}}

  Dnešní datum: {{../date}}
{{/each}}

Tato maličkost je lehce přehlédnutelná a potom budete kroutit hlavou proč je ta proměnná date vlastně prázdná, když ji máte definovanou. Ať se daří při kódování.

Komentáře