Glimmer/Handlebars: Clarify glimmer handlebars template syntax (array access by index)

[fpauser]

In a project (ember-3.16) I just came across the following snippet:

{{#with item.properties.[0] as |firstProp|}}
  <span>
    {{firstProp.label}}
  </span>
{{/with}}

This works so far, but formatting this thing with the vsc plugin Prettier for handlebars got me

{{#with item.properties.0 as |firstProp|}}
  <span>
    {{firstProp.label}}
  </span>
{{/with}}

which no longer works and triggers a parse error.

To clarify things I looked though the ember docs, but array access by index is not mentioned.

Research in the prettier glimmer/ember-template-lint space resulted in the following statements:

• .[index] syntax is invalid (but works)
• .[index] syntax is bad practise
• .index syntax is invalid and does not work

So the question remains: What is valid/invalid/bad/deprecated glimmer handlebars template syntax? What we are really missing here is a proper glimmer handlebars template syntax specification.

[jamescdavis]

The recommended way to access an array by index in a template is to use the get helper, e.g.:

{{#with (get item.properties 0) as |firstProp|}}
  <span>
    {{firstProp.label}}
  </span>
{{/with}}

[jamescdavis]

Also note that the with helper is deprecated in favor of the let helper.

{{#let (get item.properties 0) as |firstProp|}}
  <span>
    {{firstProp.label}}
  </span>
{{/let}}

[sandstrom]

I'm doing some issue gardening 🌱🌿 🌷 and came upon this issue.

Fixed in ember-learn/guides-source#1750