Search code examples
ember.jspropertiesgetteroctane

Ember Octane, Tracked property not recomputing get function using the property


In emberJS Octane, I expect a "get" function to be recomputed when the used tracked properties inside of it changes. It does not in my case.

Here is my template :

{{#each this.model.appCategories as |appCategory|}}
    # Here, we call the onChange function
    <input id="checkbox_id" value="{{this.model.appCategory.name}}" type="checkbox" onchange={{action (fn this.onChangeCategory) appCategory.name}}>
{{/each}}

# Here, we call the get function
<div>
  {{my-component value=availableAppDefinitions}}
</div>

Here is my controller :

import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import Controller from '@ember/controller';
import { A } from '@ember/array';

export default class IntegrationActivationIndexController extends Controller {
  @service session;
  @service router;

  @tracked selectedAppCategories = A([]);

  get availableAppDefinitions() {
    let filteredAppCategories = this.selectedAppCategories;
    return this.model.app.filter(function (app) {
      return app.categories.filter(appCategory => filteredAppCategories.includes(appCategory.name)).length > 0
    })
  }

  @action
  onChangeCategory(category) {
    if (this.selectedAppCategories.includes(category)) {
      this.selectedAppCategories.removeObject(category);
    } else {
      this.selectedAppCategories.pushObject(category);
    }
  }
}

The onChangeCategory function changes what is in the tracked property "selectedAppCategories". It is an array of strings. It works as expected and contains the correct value when clicking on the checkboxes.
The availableAppDefinitions uses what is inside of the property.

I expected the get function to be called when the tracked property changes but it is not called.
I also tried using the "@computed" decorator like so :

import { computed } from '@ember/object';

@computed('selectedAppCategories', 'model.appDefinitions')  
get availableAppDefinitions()

but it did not work.

Why isn't it working and how can I make it work? Is there something that I am doing wrong?

Thank you for your help.


Solution

  • You might need to use @computed(selectedAppCategories.length) or @computed(selectedAppCategories.[]) instead of just @computed(selectedAppCategories)