我想用http://tabulator.info/和ember。我不理解文档,也找不到任何关于ember配置的指南。如何从创建一个简单的表开始?
toe950271#
查看站点http://tabulator.info/上的示例,制表器似乎只需要一个元素(和一些配置)即可工作。因此,我们的最终目标是使用一个修饰符,并能够将制表器配置传递给它。所以,这就是我们最终的结果:
<div {{tabulator someConfig}}></div>
现在,不幸的是,制表器似乎只接受构造函数中的id。因此,我们需要将其动态添加到“显示制表器”中。首先要做的是安装https://github.com/ember-modifier/ember-modifier(请务必阅读文档,因为这是一件有趣的事情)然后,在应用程序中创建一个文件app/modifiers/tabulator.js并使用这些内容:
app/modifiers/tabulator.js
import Modifier from 'ember-modifier'; import Tabulator from 'tabulator'; import { guidFor } from '@ember/object/internals'; export default class TabulatorModifier extends Modifier { id = guidFor(this); get config() { return this.args.positional[0]; } didInstall() { this.element.id = this.id; let config = th this.tabulator = new Tabulator(`#${this.id}`, this.config); } }
然后,也许在组件或控制器之类的东西中,你会有这样的东西:
export default class MyComponent extends Component { get myConfig() { return { ... }; } }
<div {{tabulator this.myConfig}}></div>
应该就是这样。您将要在app.CSS中导入CSS
1条答案
按热度按时间toe950271#
查看站点http://tabulator.info/上的示例,制表器似乎只需要一个元素(和一些配置)即可工作。
因此,我们的最终目标是使用一个修饰符,并能够将制表器配置传递给它。
所以,这就是我们最终的结果:
现在,不幸的是,制表器似乎只接受构造函数中的id。因此,我们需要将其动态添加到“显示制表器”中。
首先要做的是安装https://github.com/ember-modifier/ember-modifier(请务必阅读文档,因为这是一件有趣的事情)
然后,在应用程序中创建一个文件
app/modifiers/tabulator.js
并使用这些内容:
然后,也许在组件或控制器之类的东西中,你会有这样的东西:
应该就是这样。您将要在app.CSS中导入CSS