Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] dupe items in arrays don't render properly with each helper #11524

Closed
eccegordo opened this issue Jun 20, 2015 · 2 comments · Fixed by #11525
Closed

[BUG] dupe items in arrays don't render properly with each helper #11524

eccegordo opened this issue Jun 20, 2015 · 2 comments · Fixed by #11525

Comments

@eccegordo
Copy link
Contributor

Was chatting with @krisselden on slack about this.

If you have an array with dupe primitive values such as this

  numbers: [1,1,1],
  letters: ['A','A','A'],

The each helper will not render them.

{{#each numbers key="@identity" as | item |}}
  {{item}}<br>
{{/each}}

{{#each letters key="@identity" as | item |}}
  {{item}}<br>
{{/each}}

It is only when you dedupe the arrays that it works.

  numbers: [1,2,4],
  letters: ['A','B','C'],

Here is a failing JSBin

http://emberjs.jsbin.com/tozule/3/edit?html,js

You get a null reference and the following error

TypeError: null is not an object (evaluating 'seek.key')

The obvious use case that comes to mind is a spread sheet type app where you have columns of number arrays and you want to use an each helper in your template to render the data.

The obvious workaround is to select a different key type such as key="@index"

{{#each numbers key="@index" as | item |}}
  {{item}}<br>
{{/each}}

{{#each letters key="@index" as | item |}}
  {{item}}<br>
{{/each}}

But given that key="@identity" is the default behavior (I believe), the nuance of this behavior might be lost on some users.

And more serious is if a dupe primitive value shows up somewhere deep in your array you will have problems

numbers: [1,2,3,1] 

Which is a much more likely scenario.

I think this is a known issue, just posting in case others stumble across this not so obvious bug and looking for an explanation.

I will see about creating a failing test case just as soon as I can figure out how to write it up.

In ember the @identity helper is implemented like this:

function identity(item) {
  let key;
  let type = typeof item;

  if (type === 'string' || type === 'number') {
    key = item;
  } else {
    key = guidFor(item);
  }

  return key;
}

https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/utils/decode-each-key.js

@rwjblue
Copy link
Member

rwjblue commented Jun 20, 2015

#11525 provides a useful error in this case until we can fix it upstream in HTMLBars.

@eccegordo
Copy link
Contributor Author

Awesome, that will save a lot of tears for the unsuspecting. Thanks for the quick turn around.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants