Ember - dynamically pass array of dependent keys to computed property

Question

I would like to create a component that takes a list of property names and then dynamically builds a computed property which has each value from the list as a dependent key.

{{buttons-list-component
  title="Status"
  propertyNames="active, expired, pending"
  toggleProperty="toggleProperty"
  active=active
  expired=expired
  pending=pending
}}

For the above example, I would like to to take the string passed as propertyNames, split it into an array and then have the optionsObject computed property watch each value in the array as if it was passed explicitly.

propertiesArray: function() {
  return this.get('propertyNames').split(", ");
}.property('propertyNames'),

When the property active is updated, the code below will not run, because the propertyNames has not been updated, and therefore propertiesArray has not changed.

optionsObject: function() {
  console.log("foo") // Does not run.
}.property('propertiesArray.@each'),

Is there a way to build the computed property, so that it would work in the same way as the code below, but without explicitly passing the string value of each property that optionsObject is dependant on?

optionsObject: function() {
  console.log("bar") // Does run.
}.property('active', 'expired', 'pending''),

Am I right, that you want your popertyNames elements refer to objects? So that you would have access to a active expired an pending object? — Shimu
Yes. So how can I convert them from a string to an array of Ember objects, and then make a computed function that will update when they update. — AJP

Chhirag Kataria Chhirag Kataria · Accepted Answer · 2018-02-06T19:11:29

Your propertyNames is being passed a constant string propertyNames="active, expired, pending" -- so to update propertyNames when active changes, pass a computed property to propertyNames which is calculated based on the three properties.

propertyString: function() {
  return `${active} ${active} ${active}`
}.property('active', 'expired', 'pending'),

so now when propertyString updates, your propertyNames will update, and that will trigger propertiesArray.

One more thing to note here, you need to observe propertiesArray.[] not @each -- @each is used when observing a child property.

Also, you should use the new computed property format - https://guides.emberjs.com/v2.18.0/object-model/computed-properties/#toc-toggle explains the two points I mention well

Ember - dynamically pass array of dependent keys to computed property

1 Answers