Reset Ember Component on Load

Question

I have an Ember.Component that adds items to an empty array and returns the array on submission. The problem is, if I navigate away from the Route that contains the Component (both after submitting and without submitting), and then go back to it later, the information that was last in the array is still there. I would like to to be reset every time I navigate to the route with the component.

If this were a route, I'd simply write a willTransition or deactivate method to reset my attributes. But since it's a component, it doesn't have those methods, and I can't (that I know of) access the attribute I wish to reset from the parent route. So, how can I reset this array to be empty (or reset the the entire component) every time I load this route? Thanks!

Answer 1

More likely than not, you're not setting the value you're using properly. Take these examples:

Ember.Component.extend({
    items: []
});

Ember.Component.extend({
    items: null,

    init: function() {
        this._super();
        this.set('items', []);
    }
});

In the first component, the same items array is shared by every instance of the component. So if you add an item, then create a new component, the new component still has the item (which I think is your problem).

In the second component, you can see that I set the items property in the init function. And when I set the property, I set it to a different array every time. Now, each component has their own items property.

It's hard to say without your code, but this seems like your issue.