Ember pushObjects() not notifying computed property

Question

I'm trying to use ember-light-table and I'm having some troubles on updating my array of objects.

When I use the action updateList(), I can see both arrays changing (adding/removing objects to the list), but the computed property tableModel is not triggered!

I thought pushObjects() would do the trick, but it's not notifying for some reason (it's adding). I also tried to initialize select_people with Ember.A(), although [] should already be an ember array...

My mixin:

// table-testing
import Ember from 'ember';
import Table from 'ember-light-table';

export default Ember.Mixin.create({
  table: null,
  tableColumns: null,
  tableModel: null,
  init() {
    this._super(...arguments);
    let table = new Table(this.get('tableColumns'), this.get('tableModel'), { enableSync: this.get('enableSync') });
    this.set('table', table);
  }
});

My controller

import Ember from 'ember';
import TableTesting from '../mixins/table-testing';
const { computed } = Ember;

export default Ember.Controller.extend(TableTesting, {
  tableColumns: computed(function() {
    return [{
      label: 'First Name',
      valuePath: 'firstName',
      width: '50%',
      sortable: false,
    }, {
      label: 'Last Name'
      valuePath: 'lastName',
      width: '50%'
    }]
  }),
  tableModel: computed('[email protected]', function() {
    // THIS MESSAGE ONLY SHOW WHEN VIEW IS RENDERED
    // I've tried .[], .@each, .length... none of them worked and I believe @each.firstName would be the most appropriated from what I've read
    console.log('computed method not showing',this.get('selected_people'));
    return this.get('selected_people');
  }),
  init() {
    this._super(...arguments);
    this.set('selected_people',[]);
  },
  actions: {
    updateList(item, moveToList) {
      let removeFromList, fromList, toList;
      if (moveToList === 'people') {
        removeFromList = 'selected_people'
      } else if (moveToList === "selected_people") {
        removeFromList = 'people';
      }
      // get the object lists
      fromList = this.get(removeFromList);
      toList = this.get(moveToList);
      // update list ---> HERE I UPDATE USING KOVL METHOD
      toList.pushObjects(item);
      fromList.removeObjects(item);
      console.log('update!',this.get('selected_people'));
    }
}

Your code looks perfect to me. if you can reproduce it in twiddle it will help us to look into what is going on. Just make sure tableModel should be accessed/required by the template after updateList function called. You might be accessed tableModel property inside the if block which might be false or not rendering the particular block means it will not execute the computed property. — Ember Freak
@kumkanillam, I will try to reproduce in the twiddle. I don't use tableModel anywhere else. I use the object table created in the mixin which uses this.get('tableModel')... maybe this is the catch! — tupan
@locks, those method exist. You use array of objects rather than one object You can check the API here — tupan
I put on my template one iteration over modelTable and it didn't help... I'll see if I can do something over twiddle — tupan

Ember Freak Ember Freak · Accepted Answer · 2017-06-07T12:27:04

Just make sure tableModel should be accessed/required by the template or in code.

Computed property is lazy, so it will be calculated when you ask for it either inside the code or in a template. otherwise, it will not be called. First time when we call, it will return result and it will be cached. and subsequent access will get it from cache. Changing any of the dependent properties causes the cache to invalidate so that the computed function runs again on the next access.

Mostlty copied from guides.emberjs

Ember pushObjects() not notifying computed property

1 Answers