CODEWITHSUNDEEP
javascriptember.js
renno
renno

Reputation: 2827

Ember pushObjects() not notifying computed property

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'));
    }
}

Upvotes: 0

Views: 295

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

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

Upvotes: 0

Related Questions