Externally provided models

I had a quick chat with @shuriu in our #e-light-table Slack channel.

He asked what the preferred pattern for externally provided models is:

hey, is there an accepted way to load the records from the route instead of the table component? I just realised that instatiating a table via new Table(get(this, 'columns'), get(this, 'model')) will not work :disappointed:

Depending on the scenario, there are two options I would suggest:

Computed Property

model: null,

table: computed('model', function() {
  return new Table(get(this, 'columns'), get(this, 'model'), { enableSync: true });
})

The obvious problem with this is, that whenever the model array changes (the reference / identity, not mutations), the table is re-created, thus losing all state.

didReceiveAttrs hook

model: null,

table: null,

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

  set(this, 'table', new Table(get(this, 'columns'), get(this, 'model') || []));
},

didReceiveAttrs: diffAttrs('model', function(changedAttrs, ...args) {
  this._super(...args);

  if (changedAttrs && changedAttrs.model) {
    get(this, 'table').setRows(changedAttrs.model[1] || []);
  }
}),

We're using the excellent ember-diff-attrs here. The advantage with this pattern is, that the very same table is re-used throughout the lifespan of the component.

One drawback is that enableSync cannot be used. Once #414 is fixed, this is no problem any more.