Don't destroy DOM elements with #each in Ember/Handlebars

Question

I'm trying to do a CSS animation for a bound array in ember. I'd like to do an animation each time the value changes, but it won't animate, because Handlebars completely replaces everything within the #each helper whenever the array it's iterating over changes.

Here's a simplified version of what I'm doing:

{{#each array}}
    {{custom-component value=this}}
{{/each}}

And the template for the custom-component:

<script type="text/x-handlebars" data-template-name="components/custom-component">
    <li {{bind-attr style=customAnimatedStyleThatChangesWithValue}}>{{value}}</li>
</script>

I can pre-render it with a placeholder array, e.g.:

{{#each placeholderArray}}
    {{custom-component value=[don't know what to put here]}}
{{/each}}

But, as stated in the code block, it's not like I can do value=array[this] in the custom-component call. I don't think the custom-component will re-render if the value changes, but I don't know how to pass in the value of a different array when iterating with #each.

TLDR: How can I iterate through an array of components without destroying and re-creating them whenever the array changes?

jperezov jperezov · Accepted Answer · 2014-09-24T15:26:41

So it seems I was on the right track before with the placholder array. Here's how I ended up solving this:

{{#each arrayPosition in placeholderArray}}
    {{custom-component value=array arrayPosition=arrayPosition}}
{{/each}}

I pass through the original array I wanted as the value in the component, and also pass through the position of the placeholder array I'm in. This lets me do the following in the controller:

App.CustomComponentController = Ember.Component.extend({
    ...
    customAnimatedStyleThatChangesWithValue: function() {
        //Grab the original array
        var valueArray = this.get('value');
        //Use arrayPosition to get the value you initially wanted to pass through
        var value = valueArray[+this.get('arrayPosition')];
        return "width: "+value+"px"; //Or whatever you're animating
    }.property('value')
});

Doing it this way makes it so that, as long as placeholderArray does not change, the custom component is not destroyed and then recreated.

Don't destroy DOM elements with #each in Ember/Handlebars

1 Answers