ember.jscomputed-propertiesember-components

Ember - Component property is not getting updated in template hbs


I have a component property in my component.js based on which i will show/hide some data in template.hbs

Case1: By default the componentProperty (canShow) is true, but based on some change in data it will be set false in another computed property.

        dataChanged: computed( 'data', 'canShow', function () {
             let someCalc = doSomeCalc;
             if(someCalc !== 0) { 
                this.set('canShow', false);
             }
            return someCalc;
        });

Expected: Canshow should be false, so the data in template should be hidden Result: It is getting updated as false, But in template the data is still showing

Case2: I have tried this with getter and setter in computed.

    canShowTemplateData: computed('canShow', {
       get() {
          return this.get('canShow');
        },
        set(key, value) {
          return value;
        }
    });

Even in this case, set is working fine. But the value is not at all updated in template using get() function. Also pls clarify while using set(), which value should be updated either canShow or canShowTemplateData?

Am I missing something? Or is there any other way to handle this?


Solution

  • First, computed properties should never have side effects. So never call this.set in a computed property, or do something like this.foo = ....

    Your first computed property is also problematic: its never returning anything.

    Your second example with the setter does not make sense. Your setter is not really doing anything.

    What you want is probably something like this:

        canShow: computed( 'data', function () {
            if(it is true) { 
                return false;
            } else {
                return true;
            }
        });