adopted-ember-addons / adopted-ember-addons/ember-light-table

Externally provided models

Ouverte
#450 9 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
cookbook help wanted
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.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.