Ember.js: Each helper rerenders DOM elements without preserving style

[tehmaestro]

Hi. I just updated to ember 1.13.13 from 1.12.2, at I wanted to ask for guidance on an issue/ maybe a bug.
I have the following piece of code:

{{#each items as |item|}}
    {{my-helper item}}
{{/each}}

So I have an array, and using the each helper, I call a custom helper my-helper for each item in the array. Now, inside an action, I push a new item in the array and I animate it.

{
    actions: {
        myAction: function(item) {
           this.get('items').push(item);
           let $item = Ember.$(item.id);
           velocity($item, {
               translateX: 100px,
               opacity: 1
           });
        }
}

So initially, the div referenced by $item has an opacity of 0, so that the animation moves the element and fades it in without weird glitches, but once the action has been triggered and the element is in the array, it must remain visible, with opacity of 1.

Now this works fine in Ember 1.12, but in 1.13 it doesn't. Once I push another item, the other item/items in the items array go back to 0 opacity, and they loose all of the styling, such as transform: translate. So basically, all the elements in the array completely rerender and lose their previously set styling.

Is this intended to work like this in Ember 1.13 or is it a bug? Thank you.

The helper simply outputs a html div, with a certain background image, depending on item.

export default Ember.Helper.helper(function([item]) {
        var url = calculateUrl(item);
        return new Ember.String.htmlSafe('<div id="someclass-' + item.i + '" class="someclass-image" style="background-image:url(' + url + ');"></div>');
    }
});

[rwjblue]

A demo would be helpful, and would allow us to see if this has been fixed on newer versions (1.13 is quite old at this point and it's fairly unlikely to receive bug fixes even if this is determined to be a bug).

[tehmaestro]

Hey, thanks so much. I'm slowly making my way up to Ember 2.4 (coming from Ember 1.11 :) ).

Here's a reproduction, just click the button: https://ember-twiddle.com/0dcbef3316252a48d4129b9902f28478?openFiles=controllers.application.js%2C

[stefanpenner]

Each helper rerenders DOM

Took a look, it appears there is an issue where if an each contains a helper it looses its diffing semantics for some reason:

_for 1.13.x -> 2.9 the following is true (although appears fixed on beta, and should then be fixed for 2.10)_

---

stable:

{{#each list as |data|}}
  <div id="name-{{data.id}}"></div> 
{{/each}}

stable:

{{#each list as |data|}}
  {{my-component name=data.id}}
{{/each}}

unstable:

{{#each list as |data|}}
  {{my-helper data}}
{{/each}}

{{#each list as |data|}}
  {{my-component name=data.id}}
  {{my-helper data}}
{{/each}}

{{#each list as |data|}}
  <div id="name-{{data.id}}"></div> 
  {{my-helper data}}
{{/each}}

[stefanpenner]

Good news, this appears to be fixed with glimmer2 (current beta, and to be released as 2.10.x)

[stefanpenner]

It is unclear to me if we will fix this in old versions or not, as "back-porting glimmer2" itself isn't an option. Although it may be possible for a separate fix to be created for older versions (like LTS releases), we will need to chat to figure out if we can.

[rwjblue]

I believe it would likely take quite a bit of effort to figure out a fix for HTMLBars (2.8/2.9), if someone is interested in that we will absolutely entertain and help review PR's but I doubt the core team folks will have much time to try to figure it out.

My gut feeling here is that we leave this open until 2.10, and close it as fixed....

[rwjblue]

Also, RE: LTS, I think "fixing" itself could break folks that are unwittingly relying on the bug (it has been this way the entire 2.x cycle). So I'd be ok with a fix targeting 2.9 (if after review we decided it was low risk), but not really ok with backporting to 2.8...

[stefanpenner]

alright, milestone set to 2.10, we can close when 2.10 lands.

[Serabe]

Can this be closed?

[tehmaestro]

Funny, thing, I just updated like a week ago to ember 2.13 because of this issue, which I was able to work around the previous time. It is fixed now.