CODEWITHSUNDEEP
javascriptarraysember.jscheckboxscope
whyAto8
whyAto8

Reputation: 1670

ember js - value returned from computed property looks cached

I am having this weird issue while returning an array from a computed property. I got to know the problem exactly (as below), but not sure about solution. Have created a twiddle for demo purpose to explain.

Case 1: https://ember-twiddle.com/9910dfea25b6fc4791e3920acca2558d?openFiles=controllers.application.js%2C

Steps:

a) Check the first checkbox and if we see the value of "arr" in console, the "newprop" property will be added to each object in "arr"

b) Un check the same checkbox, see the console, the same "arr" is returned with that "newprop" still there. But I was assuming, it wouldn't have been there, as there is a check for that in if condition.

So, after little troubleshooting, I came up with this identical next twiddle.

Case 2: https://ember-twiddle.com/735750b0a41c4bf87841bc79c6163259?openFiles=controllers.application.js%2C

perform the same steps and we see that this time the "arr" doesn't have "newprop" when the checkbox is unchecked

The only difference between twiddle is that the array (having data/model) in the first one is defined in "getData" itself and in second, its taking it from another computed property "what".

What I am looking for: I need to have case 1 twiddle working, but when the checkbox is unchecked, the "arr" should return the actual original "arr" without the "newprop". Also, need to understand why its happening. The only thing changed is that fetching the data directly inside fn or via another computed property.

Upvotes: 0

Views: 330

Answers (1)

Timm
Timm

Reputation: 1015

This is the main purpose of computed properties. They change if they're dependent keys change. In case 2 you are always redefining your array. In case 1 you're accessing the same array every call.

In case 1 you can add a dependent key on your property list.

what: function(){
  var arr = [
      {
        a:"b",
        c: [
          {key:"1"},{key:"2"}
        ]
      },
      {
        a:"f",
        c: [
          {key:"1"},{key:"1"}
        ]
      }
    ];
    return arr;
  }.property('filterSet'), // see here

This will regenerate your array when the property filterSet changes.

EDIT:

proof

Upvotes: 1

Related Questions