# New Glimmer consideration: #each key= **URL:** \ **Category:** Uncategorized\ **Created:** [June 3, 2015, 8:09am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128 "2015-06-03T08:09:07Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [June 3, 2015, 8:09am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/1 "2015-06-03T08:09:08Z")
I’m in the processing of upgrading lots of components to glimmer. I’ve noticed subtle differences around the `{{each}}` helper: When the array changes, each component in the loop is rendered _as expected_: **Pre glimmer** : [Ember each rendering - JSFiddle - Code Playground](http://jsfiddle.net/amk221/6mjskzp4/) When the array changes, _nothing happens_ **Glimmer** : [Ember render bug - JSFiddle - Code Playground](http://jsfiddle.net/amk221/rehkvtv3/) This is solved by adding `key='id'` to the each helper. I get that this is react-style rendering in action, but my questions are: - Why was this never mentioned? - What is the rule of thumb for using it? ---
**Author:** ![jmurphyau](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jmurphyau/32/16684_2.png) [@jmurphyau](https://discuss.emberjs.com/u/jmurphyau)\ **Post date:** [June 3, 2015, 8:40am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/2 "2015-06-03T08:40:22Z")
You should have `thing` as a dependant key on your computed property… That also fixes it. ---
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [June 3, 2015, 8:53am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/3 "2015-06-03T08:53:48Z")
@jmurphyau Yes that would also fix it. But that’s not the same. That would imply to developers / users of the component that the properties need to re-compute. But they don’t. The component is a one-time only thing. ---
**Author:** ![ilkkao](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ilkkao/32/10279_2.png) [@ilkkao](https://discuss.emberjs.com/u/ilkkao)\ **Post date:** [June 3, 2015, 9:12am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/4 "2015-06-03T09:12:10Z")
There’s an open issue to document key in each: [https://github.com/emberjs/ember.js/issues/11117](https://github.com/emberjs/ember.js/issues/11117) What surprised me was the requirement that the key must be a string. Otherwise you get a ‘Uncaught Error: You must provide a string key when calling `yieldItem`; you provided 1’ Shouldn’t at least numbers be accepted as well? In my app messages that I show with #each have unique gids that are numbers. As a workaround I created a computed property that just converts them to strings. Would be nice to not need it. ---
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [June 3, 2015, 9:14am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/5 "2015-06-03T09:14:02Z")
@ilkkao Numbers are accepted if you pass one in: `key=number` will be cast to a string. `key='foo.bar'` uses the path directly. (thanks for the link, wish I’d found that sooner). [Edit: incorrect] ---
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [June 3, 2015, 4:32pm UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/6 "2015-06-03T16:32:05Z")
@ilkkao I’ve later learned that although `key=number` and `key='foo.bar'` both result in strings. They are not the same. Using the ‘path’ format is more reliable ---
**Author:** ![amk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amk/32/9116_2.png) [@amk](https://discuss.emberjs.com/u/amk)\ **Post date:** [June 4, 2015, 9:36am UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/7 "2015-06-04T09:36:12Z")
There was some discussion in the Slack community about this. It was decided that it should really work with an integer value because it is so common. [https://github.com/emberjs/ember.js/issues/11343](https://github.com/emberjs/ember.js/issues/11343) ---
**Author:** ![ilkkao](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ilkkao/32/10279_2.png) [@ilkkao](https://discuss.emberjs.com/u/ilkkao)\ **Post date:** [June 4, 2015, 8:37pm UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/8 "2015-06-04T20:37:01Z")
Nice to hear. @amk thanks for proposing it. ---
**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [June 4, 2015, 8:50pm UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/9 "2015-06-04T20:50:24Z")
Added in [[BUGFIX beta] Add special values to `{{each}}`'s keyPath. by rwjblue · Pull Request #11339 · emberjs/ember.js · GitHub](https://github.com/emberjs/ember.js/pull/11339). 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: ```handlebars {{#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`). ---
**Author:** ![rwjblue](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rwjblue/32/9411_2.png) [@rwjblue](https://discuss.emberjs.com/u/rwjblue)\ **Post date:** [September 27, 2015, 11:43pm UTC](https://discuss.emberjs.com/t/new-glimmer-consideration-each-key/8128/10 "2015-09-27T23:43:49Z")
Many of the issues that existed in the initial implementation (in 1.13.0) have been fixed, and it is now unlikely that you have to provide a `key=` option at all. By default the items own reference (`Ember.guidFor(item)` if it is an object or the value if it is a primitive value). See [Ember - 4.6 - Ember API Documentation](http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_specifying-keys) for details.