Chartjs-Emberjs binding properties within Ember object

0đź‘Ť

âś…

This is related to your nested structure. The computed property is scoped to the local object, so in this case your alias would work for label, fillColor, etc… but can’t reach its parents.

I created an ember twiddle that demonstrates this:

https://ember-twiddle.com/a91df745677ba49b5d12c9575d7dca19?openFiles=controllers.application.js%2C

I also show a solution in the twiddle which uses an observer to set the value. You could just as well try setting it directly, but maybe the intermediate function setting helps reason about how the data is sent down.

// called on init, and for any subsequent changes
setDynamic: Ember.on('init', Ember.observer('appName', function() {
      this.set('nested.observed', this.get('appName'));
}))

Observers in Ember can be dangerous, especially when they observe things that cross boundaries. This observer is local, and only sets data which in turn is not observed, so this isn’t the worst use case of an observer. There might be a better solution that doesn’t use an observer or setting the value on the socket.on, but at least this somewhat follows Ember’s “data down, actions up” idea.

You could make the entire data root property a computed property and return the object, but that is a lot of computation for only caring about a single change and would probably be more expensive overall.

Leave a comment