adopted-ember-addons / adopted-ember-addons/ember-light-table
Externally provided models
- 主要語言
- JavaScript
- 星號
- 311
- 分支
- 130
- PR 合併指標
- 30 天內沒有已合併 PR
描述
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.
貢獻指南
研究方向
Start by reading the issue discussion and the related #414, because the body describes possible patterns but not a concrete change. The relevant entry points mentioned are Table construction, setRows, enableSync, didReceiveAttrs, and ember-diff-attrs usage. Done is not well defined from the issue alone; it would need maintainer confirmation of whether this is docs or behavior support.
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript
- 領域
- frontend
- Issue 類型
- 功能
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100