New Glimmer consideration: #each key=

9

Added in [BUGFIX beta] Add special values to `{{each}}`'s keyPath. by rwjblue · Pull Request #11339 · emberjs/ember.js · GitHub.

Also added some documentation (copy/paste follows):

key param

The key hash parameter provides much needed insight into how the rendering engine should determine if a given iteration of the loop matches a previous one. This is mostly apparent during re-rendering when the array being iterated may have changed (via sort, removal, addition, etc).

For example, using the following:

  {{#each model key="id" as |item|}}
  {{/each}}

Upon re-render, the rendering engine will match up the previously rendered items (and reorder the generated DOM elements) based on each item’s id property.

There are a few special values for key:

  • @index - The index of the item in the array.
  • @item - The item in the array itself. This can only be used for arrays of strings or numbers.
  • @guid - Generate a unique identifier for each object (uses Ember.guidFor).
1 Like