CODEWITHSUNDEEP
javascriptember.js
copenndthagen
copenndthagen

Reputation: 50742

Use constant for Ember computed property dependent key

For an Ember app, is it possible to use a constant as part of a computed property key ?

So, essentially, I have a constant as below;

MY_SECTION {
MY_FIELD: "my-field-id"
}

What I want is a computed property on "my-field-id" i.e.

myCP: function() {
console.log('Inside CP...');
}.property('section.field.my-field-id.value')

However, I want to be able to use constant for my-field-id instead of using it directly. Is that possible ?

Upvotes: 1

Views: 408

Answers (1)

real_ate
real_ate

Reputation: 11289

Ola @testndtv, thanks for your question! Yes it is entirely possible to use a constant in the key for a computed property, but to make use of it you will need to use the more modern syntax that @jelhan was mentioning because .poperty() is deprecated.

Here is a working example of a controller that I have tested locally and is working as you would expect: 

import Controller from '@ember/controller';
import { defineProperty, computed } from '@ember/object';

const PROPERTY_ID = 'some-random-string-that-is-too-long-to-write';

export default Controller.extend({
  // this is just for the example so we can show the value in the template
  // it is not needed to get this to work
  PROPERTY_ID: PROPERTY_ID,

  init() {
    this._super(...arguments);

    defineProperty(this, 'myCP', computed(PROPERTY_ID, function() {
      return this.get(PROPERTY_ID);
    }));
  },

  actions: {
    addOne() {
      // this is just for the example to stop the result always being NaN because
      // null + 1 = NaN
      let value = this.get(PROPERTY_ID) || 0;
      this.set(PROPERTY_ID, value + 1);
    }
  }
});

As you can see we are making use of defineProperty which is being imported from '@ember/object'. You can read more about it in the API documentation

The key insight here is that you need to define the property dynamically in the init() for this Ember object.

The corresponding template for this Controller is as follows: 

Property ID is: {{PROPERTY_ID}}

<br>

And the value is: {{get this PROPERTY_ID}}

<br>

<button {{action 'addOne'}}>Add One</button>

Upvotes: 1

Related Questions