CODEWITHSUNDEEP
javascriptember.jsaliascomputed-properties
Floyd
Floyd

Reputation: 75

Ember.JS force computed property to recalculate

So I have a computed property in my Ember application. Declared as myComProp: computed('itemTrait', function () {...}). myComProp belongs to an item model. In a separate component (listItem) I have a property that is an alias of myComProp: myAlias: alias('itemModel.myComProp'). Now listItems are a member of an array of listItems, with its properties being rendered in the web app.

Now by the property being an alias, is there a way to force the computed property to recompute?

I have tried making the alias a tracked property but doing so returns the call stack as a string, not the actual result of the computed function.

UPDATE

Adding this to better explain.

// itemModel.js
export default parentModel.extend({
   //irrelevant properties

   myComProp: computed('itemTrait', function() {
       // logic
   })
});

Elsewhere there are two components. One is the part of the page that renders a list of itemModels and the other is representation of the itemModel (which is fetched from the data store by the list component)

// itemModelRep/component.js
export default Component.extend({
    // other properties

    myAlias('item.myComProp')
    // itemModel is represented in the list by 'item'
});

And the list:

//itemList.js

export default parentDisplay.extend({
    // other properties

    get items() {
        // this is what is used as the list items
        // it basically gets a list of items from the itemModel record set in
        // the data store

        listOfItems.forEach((item) => {
             // Other stuff going on
             // Here I want to force the property to recompute
        };
    }
});

Basically the myComProp is getting a relevant date, and when I update the list with a new item, I want to recalculate the relevant date. The get events is based off of a tracked list, so it runs each time the live feed is added to

Upvotes: 1

Views: 2530

Answers (1)

Gaurav
Gaurav

Reputation: 12796

Let me see if I understand your question:

// app/models/item.js

myComProp: computed('itemTrait', function () {...});

and

// app/components/list-item.js

itemModel: null, // passed in

myAlias: alias('itemModel.myComProp'),

listItems: null,

init() {
  this._super(...arguments);
  this.listItems = [this.itemModel];
}

actions: {
  changeItem() {
    this.itemModel.itemTrait = 'new value';
  }
}

and when changeItem is called, itemModel.itemTrait changes and listItems doesn't express those changes?

If so, the problem isn't that your computed property or your alias is not updating. The problem is that the list doesn't know it needs to update.

The quick fix:

actions: {
  changeItem() {
    this.itemModel.itemTrait = 'new value';
    this.notifyPropertyChange('listItems');
  }
}

Here is some info on notifyPropertyChange: https://api.emberjs.com/ember/3.20/classes/Component/methods/notifyPropertyChange?anchor=notifyPropertyChange

If I've misunderstood your question, please explain and/or update your question.

This answer is current as of Ember 3.20

Upvotes: 2

Related Questions