Computed array property not getting updated in the dom

Learning Team
1

Hi Team,

I am new to ember js, The version we are using is 1.13.x and I have been facing this problem for over a week now. I have a computed array property otherCurrencies. This property is used to populate set of checkboxes on the screen. This checkbox component is an rendered on the dom as a view and its value is toggled based on the selection of a customer in a dropdown. Now if I write the entire logic of assigning the value of otherCurrencies in the a controller using functions, it works fine. Based on customer A a set of currencies are assigned to otherCurrencies array and the corresponding checkboxes are preselected, similarly for a customer B a different set of currencies are pre selected.

But as soon as I move the logic of this assignment to a computed property, I can see that the computed property is getting called and the logic returns the right set of currency values as shown by console loggers which I used all over the code, but the DOM is not getting updated, as in the checkboxes are not getting pre-populated even when the otherCurrencies array contains the values.

I have hunted the net for days now and tried many things but none seem to work at all. I request you to kindly provide some light on this matter, need to do this if I want to continue working on ember otherwise my plug is pulled and no UI work for me. Please help…

2

Hey, please share not working code on https://ember-twiddle.com/ it’ll be easier to hunt for bug.

3

Hi I have posted the same question on stack overflow under the following link … Have provided formatted code in there as well since I could not figure out on how to provide code on ember-twiddle…https://stackoverflow.com/questions/47726301/computed-array-property-not-getting-updated-in-the-dom

4

hi please do help…

5

hey, firstly please format your code, it’ll be easier to read.

otherCurrencies : Em.computed(‘isExistingÇustomer’, function(){ 
  if(this.get(ísExistingCustomer’) && this.get(‘selectedCustomerNo’)) { 
    var existingCurrencyDetails = this.get(‘arrayOfCurrencyDetails’).findBy(‘çustomerNumber’, this.get(’‘selectedCustomerNo’)); 
    if(existingCurrencyDetails) { 
       return existingCurrencyDetails.existingCurrencies 
    } 
  return []; 
});

first thing is you listen on “isExistingÇustomer” and then you use “ísExistingCustomer” - those are different properties.

in your view code you use “óptions” and “options”

try to clear properties values, and if remember that if you set listener on array you need to listen on length or each to get it working when array changes