adopted-ember-addons / adopted-ember-addons/ember-light-table
Externally provided models
- Langage dominant
- JavaScript
- Étoiles
- 311
- Forks
- 130
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
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
```js
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
```js
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`](https://github.com/workmanw/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.
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.