CODEWITHSUNDEEP
ember.js
Jacob van Lingen
Jacob van Lingen

Reputation: 9537

Ember 1.13 each loop in each loop

As stated here, Ember 1.13 needs a key for the {{each}} helper. Since Ember 1.13.2 the default key is @identity.

Now I am trying to fix my code, I have an each loop nested inside another (piece of code that shows an calendar). I get the following error:

Uncaught Error: Duplicate key found ('(null)') for '{{each}}' helper, please use a unique key or switch to '{{#each model key="@index"}}{{/each}}'.

But even if I add a @guid as key, the error is still shown. Code:

{{#each weeks key="@guid" as |week|}}
    <tr>
        {{#each week key="@guid" as |day|}}
            <td class="day"></td>
        {{/each}}
    </tr>
{{/each}}

I don't understand that. As @guid should create an unique identifier for each object, why do I still get this duplicate key found error?

EDIT: My assumption that Duplicate key found had anything to do with nested each loops was plainly wrong. After trying to build a fiddle as Kitler proposed, I did understand my problem (see the answer).

Upvotes: 0

Views: 636

Answers (2)

pixelhandler
pixelhandler

Reputation: 625

This is a regression in v1.13.x and expected to be resolved in a patch, perhaps v1.13.6

This is the closed issue : https://github.com/emberjs/ember.js/issues/11549

And the merged pull request: https://github.com/emberjs/ember.js/pull/11861

Upvotes: 2

Jacob van Lingen
Jacob van Lingen

Reputation: 9537

After trial and error, I did understand what was causing the error.

Cause
Some items in my loop where null. Ember 1.13.x and up tries to add an id for every item. As null means nothing, the first null-item get key null, as Ember provides a nothing-key to nothing. The following null-items also get a nothing-key as Ember does that for every null-item.

Error
Because the helper requires a unique id for every item, Ember throws an Duplicate key found ('(null)') error; telling the programmer some items has the same id.

Solution
Fixing this is quite easy, just provide an empty object ({}) instead of null. As one empty object is not the same as another empty object, Ember will create an unique id for every empty object!

Code example: Bin.

Upvotes: 0

Related Questions