时间戳

首页 > 解决方案 > 在 EmberJS 中创建一个完全动态的表

javascript - 在 EmberJS 中创建一个完全动态的表

问题描述

我model在 EmberJS 中定义了具有以下属性的 a：

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')
});

我正在创建一个component调用fields-list，它将这些属性呈现到一个表中（标题、正文；就像列出一些字段的典型表一样）。但是，model我不想只将表绑定到这个，而是想让它component完全动态化，以便其他具有不同字段名称的模型也可以重用它component来生成它们的表。

这样，无论何时component使用 ，它都会根据 that 中的字段检测model并填充表的标题和正文model。

我如何实现这一目标？如果查询中有任何不清楚的地方，请告诉我，我已尽我所能正确解释问题。提前致谢！

标签： javascriptember.js

解决方案

我个人不使用 Ember Data，所以可能有更好的方法来做你正在做的事情，但我为你提供了一个解决方案，可以作为ember twiddle或gist使用。这只不过是一个概念证明。

让我们快速分解这个问题。您想创建一个可以采用任何模型并神奇地为您构建表格的组件。在最高级别，我们知道我们需要能够迭代数据模型的定义，并根据您传递的 Ember 数据类型创建特定类型的列DS.attr。进一步思考，我们知道 Ember Data 必须具有某种能力来做同样的事情：eachAttribute。如果它是一个私有 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 灯表采用列定义对象，我们可以通过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;
})

如果您想呈现不同的单元格类型，您可以在这里检查每个属性的特定类型meta的函数参数，以在列定义中设置属性。eachAttributecellComponent

有一个名为Ember Admin的项目，它会根据您的数据模型自动构建一个 CRUD 界面，因此有一个灵感的地方。

推荐阅读