Array prototype extension deprecations within a model object

After upgrading my app to 5.12.0, I saw the deprecation warning about the prototype extensions. (Deprecate array prototype extensions | Ember.js - Deprecations)

I came across a scenario in my app that doesn’t appear to be covered by the examples: arrays embedded within a controller’s model.

Simplified example:

Template:

{{#each this.model.fruits as |fruit|}}
  {{fruit}}
{{/each}}

<button {{on 'click' this.addFruit}}>Add Fruit</button>

Controller:

  @action
  addFruit() {
    this.get('model.fruits’).pushObject(“apple");
  }

Route:

  Model is just an API post response put into an EmberObject, something like:
  { fruits: [ “apple”, “banana” ], favoriteFruit: “watermelon”, etc. } 

Once I change pushObject to push to address the deprecation, the template will no longer track new fruits.

I can work around this by calling notifyPropertyChange from addFruit, but that feels a bit heavy-handed.

Is there a best practice for this kind of scenario? Perhaps some way to add tracking to an array property within an EmberObject?

Should this be mentioned in the deprecation guide, either with the better solution (if there is one) or the notifyPropertyChange workaround (which took me a bit of digging to find)?

1 post - 1 participant

Read full topic