Ember component computed function does not rerun when data changes

Question

I have stored a string value within a computed property like so:

clientId: Ember.computed.oneWay("_clientId")

where _clientId is defined as a property on the object like so:

export default Ember.service.extend { _clientId: null, clientId: Ember.computed.oneWay("_clientId"), updateId() {this.set("_clientId", "fe48822d-bf50-44a1-9ce0-61b06504d726"); } }

I then have a component with a computed property like so:

chartData: Ember.computed("data", function () {
    const data = this.get("data");

    const clientId = this.get("session").get("clientId");
    console.log(clientId);

    if (data && data.get("left") !== undefined && data.get("right") !== undefined) {
        return data;
    }

    this.set("_chartDisplayData", null);
    return null;
})

When I called updateId, i expected the chartData function to be re-run as the value of the clientId is changed (i verified that the value gets changed for clientId). However, the chartData function never re-runs, why is this?

You seem to be looking for an observer rather than a computed property. The computed property logic will not fire unless chartData is being referenced from somewhere, such as a template. In general, set inside a computed property definition is a code smell and probably means you aren't doing things right. — user663031

RustyToms RustyToms · Accepted Answer · 2017-05-25T17:41:14

You need to tell the computed property about all of your dependencies. First, the computed property will never run if it isn't being used somewhere. If you aren't using it you need an observer instead. But assuming you are actually using it, the computed property will only recompute itself when one of the listed dependencies change. And if you list an object as a dependency, it will not update if only some of the object's properties are changed, only if the entire object is replaced. Try this:

chartData: Ember.computed("data.left", "data.right", "session.clientId", function () {
    const data = this.get("data");

    const clientId = this.get("session.clientId");
    console.log(clientId);

    if (data && data.get("left") !== undefined && data.get("right") !== undefined) {
        return data;
    }

    this.set("_chartDisplayData", null);
    return null;
})

Ember component computed function does not rerun when data changes

1 Answers