Incorrect attributeBindings for Ember model

[Mariusio]

We have two models, dashboard and report and the relationship is set up like reports: hasMany('reports') in models/dashboard.js.

In our dashboards/show.js route we pass the selected dashboard to a dashboard-grid component in which we iterate over the reports like this:

{{#each dashboard.reports as |report|}}
  {{dashboard-grid-report
    report=report
  }}
{{else}}
   [...]
{{/each}}

Inside dashboard-grid-report we use attributeBindings like this:

  attributeBindings: [
    'report.column:data-gs-x',
    'report.row:data-gs-y',
    'report.width:data-gs-width',
    'report.height:data-gs-height',
    'report.id:data-gs-id',
    'data-gs-min-width',
    'data-gs-min-height'
  ],

  'data-gs-min-width': 1,
  'data-gs-min-height': 2,

Now, every 10-20th time we render the dashboard-grid component the attribute bindings will be incorrect. For instance, for a specific report we look into Ember Inspector and see that column: 0 and row: 4 while in the DOM element the values are data-gs-x="5" (incorrect) and data-gs-y="4" (correct).

Unfortunately we haven't found any reproducible case for this issue.

What is interesting though is that when the issue occurs, the order of the data-gs- attributes in the DOM element will be different for the reports where the values are incorrect.

For example:

1. case (all reports are correct, no problems)
All report DOM elements have the following structure

<div id="ember1109" data-gs-x="7" data-gs-y="10" data-gs-width="5" data-gs-height="8" data-gs-id="d8bo-yj6p-l9jz" data-gs-min-width="1" data-gs-min-height="2" class="ember-view grid-stack-item widget-visible">

2. case (some reports are broken)
The DOM element attribute order varies between broken and correct reports.

e.g. DOM element for a correct report

<div id="ember5159" data-gs-id="9qed-yk8q-yj3v" data-gs-min-width="1" data-gs-min-height="2" class="ember-view grid-stack-item widget-visible ui-resizable-autohide" data-gs-x="0" data-gs-y="13" data-gs-width="4" data-gs-height="5">

e.g. DOM element for a broken report

<div id="ember5146" data-gs-x="0" data-gs-y="10" data-gs-width="4" data-gs-height="4" data-gs-id="3dko-l4v4-lnz2" data-gs-min-width="1" data-gs-min-height="2" class="ember-view grid-stack-item widget-visible ui-resizable-autohide">

The incorrect attribute in this report is data-gs-y, which should be 4.

@runspired mentioned that he has seen the same bug, but was also not able to reproduce it. Hopefully this report helps.

Versions:

-------------------------------
Ember             : 2.7.0
Ember Data        : 2.7.0
jQuery            : 2.2.4
Ember Simple Auth : 1.1.0
-------------------------------

[rwjblue]

Nothing strikes me as an obvious culprit here, and without a reproduction it is going to be pretty hard to track down...

[runspired]

@rwjblue @stefanpenner and I tracked it down on our end to a situation in which the records (store vs ui) were actually referencing separate InternalModels with identical IDs. I've since been able to identify a code path in which an async hasMany loaded with its parent will produce two separate InternalModels, one is left disconnected but is unfortunately the one returned to the UI. It's a rather difficult situation to untangle at the moment, but I should have it fixed soon.

[runspired]

Likely duplicate: #4507

[wecc]

@runspired did you get a chance to track this one down? I'd be happy to pair on it tomorrow.

[runspired]

We've resolved this with #5413