Javascript 在EmberJS中创建完全动态的表

我在EmberJS中定义了一个具有以下属性的

模型

：

import DS from 'ember-data';

export default DS.Model.extend({
    "name": DS.attr('string'),
    "status": DS.attr('string'),
    "email1": DS.attr('string'),
    "account_name": DS.attr('string'),
    "phone_work": DS.attr('string'),
    "date_entered": DS.attr('string'),
    "date_modified": DS.attr('string')
});

我正在创建一个名为

字段列表的
组件
，它将把这些属性呈现到一个表中（标题、正文；就像列出一些字段的典型表一样）。但是，我希望使
组件
完全动态，以便具有不同字段名称的其他模型也可以重用此
组件
，以生成它们的表，而不是仅将表绑定到此
模型

这样，无论何时使用
组件
，它都会检测
模型
，并根据该
模型
中的字段填充表格标题和正文

我如何做到这一点？如果查询中有任何不清楚的地方，请务必让我知道，我已经尽我所能正确地解释了这个问题。提前谢谢
 我个人不使用余烬数据，所以可能有更好的方法来做您正在做的事情，但我为您提供了一个解决方案，作为或。这只是一个概念证明

让我们很快地把这个问题分解一下。您希望创建一个可以接受任何模型的组件，并神奇地为您构建一个表。在最高级别上，我们知道我们需要能够迭代数据模型的定义，并根据作为
DS.attr
传递的余烬数据类型创建特定类型的列。进一步考虑，我们知道余烬数据必须具备某种能力来完成相同的任务：。如果它是一个私有API，请认识到它是脆弱的和版本特定的（也称为写测试）

因此，给定一个模型Foo：

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
    "name": attr('string'),
    "status": attr('string')
});

让我们通过构造函数获取模型的定义：

var record = this.store.createRecord('foo', {
    name: "model1",
    status: "status1"
});
this.modelClass = record.constructor;

Ember light table采用columns definition对象，我们可以通过在所述模型类上使用
eachAttribute
从组件中动态创建该对象：

columns: computed('modelClass', function() {
    let modelClass = this.modelClass;
    if(!modelClass){ return [] }
    let columns = [];
    modelClass.eachAttribute(function(key, meta){ 
      columns.push({
         label: key,
         valuePath: key
      });
    });
    return columns;
})

在这里，您可以针对每个属性的特定类型检查
eachAttribute
函数的
meta
参数，以便在列定义中设置
cellComponent
属性，前提是要呈现不同的单元格类型

有一个叫做CRUD的项目，它可以自动建立一个脱离数据模型的CRUD接口，因此有一个灵感的地方
 如果你可以自己构建，为什么要求助于插件

app/templates/some route.hbs

<FieldsList
  @resources={{users}}
  @columns='id, firstName, lastName, job.title, job.company.name'
  @sortBy='firstNameAsc'
  @filterBy='firstName, lastName'
/>

<ul>
  {{#each resources as |resource|}}
    <li>
      {{#each columnMap as |column|}}
        <span>{{get resource key}}</span>
      {{/each}}
    </li>
  {{else}}
    <li>No humans found</li>
  {{/each}}
</ul>

app/components/fields list/template.hbs

<FieldsList
  @resources={{users}}
  @columns='id, firstName, lastName, job.title, job.company.name'
  @sortBy='firstNameAsc'
  @filterBy='firstName, lastName'
/>

<ul>
  {{#each resources as |resource|}}
    <li>
      {{#each columnMap as |column|}}
        <span>{{get resource key}}</span>
      {{/each}}
    </li>
  {{else}}
    <li>No humans found</li>
  {{/each}}
</ul>

在ember cli:3.5.0中完成
您看过现有的表实现吗？有很多ember插件正试图实现您想要的：到目前为止您尝试了什么，您的问题是什么？看一看。我看了又看。Ember Light Table有更好的文档，但我不知道如何从
模型
动态添加表头和数据。谢谢！解释和旋转确实有助于理解这个概念。有趣的解决方案，尽管我认为您可能是偶然地交换了第二条和第三条路径。尽管如此，我理解你的意图。谢谢：）