如何在 emberJS 中构建元驱动的应用程序
How to build a meta-driven application in emberJS
注意: 本文中使用的英文（连同术语）可能有点"out of order" 因为我的母语不是英语。请放心，我已尽力使其尽可能可读，如果我遗漏了任何内容，请在投票前发表评论，以便我可以相应地更新问题（我对此还是陌生的）
所以我在互联网上搜索了大部分的解决方案，找到了一个教程来指导我在 EmberJS 上构建应用程序的元数据驱动方法。 Ember 上的文档没有解释有关该方法的任何内容，只是 extractMeta here, and a basic overview of how to handle metadata here.
的函数定义
我想要实现的是构建一个门户，以 Sugar 作为应用程序的后端。该应用程序将使用 REST API 进行调用以提取数据以及应用程序的 metadata。我们希望使应用程序通用，以便无论调用什么模块，都会提取元数据以确定模型中所需的字段，将调用所需数据的过滤部分相应地填充到模型中并显示在通用模板中，它将是全局的并在整个应用程序中使用。
metadata包括buttons、panels、attributes（每一项都包含多层数据）等，每项可使用一次或在通话中多次或根本没有。例如，为了显示应用程序，需要 attributes 用于在 table 中显示，以及 buttons 用于添加、删除更新等。单击 panel 可能是需要说，添加一个特定的记录，它本身可能包含各种字段。
例如，默认 Sugar 实例显示数据中的 导联 ，请注意它如何包含各种组件。
这是另一个示例，当我单击潜在客户列表中的 创建 按钮时出现的面板，请注意面板中出现的字段
请注意，我确实了解如何对 data 和 metadata 进行 REST API 调用。但是如何将它变成通用的 元驱动 应用程序是我正在努力解决的问题。提前致谢！
如果我理解正确，您正在寻找某种基于从 REST 端点返回的数据的通用 UI 构建器。 Ember 提供 component 助手。
The {{component}} helper can be used to defer the selection of a
component to run time. The {{my-component}} syntax always renders the
same component, while using the {{component}} helper allows choosing a
component to render on the fly. This is useful in cases where you want
to interact with different external libraries depending on the data.
Using the {{component}} helper would allow you to keep different logic
well separated.
{{#each model as |post|}}
{{!-- either foo-component or bar-component --}}
{{component post.componentName post=post}}
{{/each}}
阅读 here 以获得更详尽的解释。
您基本上需要做的是为 metadata 中的每个可能属性构建一堆不同的组件。您的模型将包含它们应该渲染的组件，您将使用 component 助手来动态渲染正确的元素。
如果您使用的是基于 table 的方法，请查看 ember light table。他们在如何为 table 构建列并支持自定义组件方面充分利用了这种方法：
columns: computed(function() {
return [{
label: 'Avatar',
valuePath: 'avatar',
width: '60px',
sortable: false,
cellComponent: 'user-avatar'
}, {
label: 'First Name',
valuePath: 'firstName',
width: '150px'
}];
})
正如您在此处看到的，列是一般呈现的，它们使用 cellComponent 属性 来确定要呈现的组件类型。
注意: 本文中使用的英文（连同术语）可能有点"out of order" 因为我的母语不是英语。请放心，我已尽力使其尽可能可读，如果我遗漏了任何内容，请在投票前发表评论，以便我可以相应地更新问题（我对此还是陌生的）
所以我在互联网上搜索了大部分的解决方案，找到了一个教程来指导我在 EmberJS 上构建应用程序的元数据驱动方法。 Ember 上的文档没有解释有关该方法的任何内容，只是 extractMeta here, and a basic overview of how to handle metadata here.
的函数定义我想要实现的是构建一个门户，以 Sugar 作为应用程序的后端。该应用程序将使用 REST API 进行调用以提取数据以及应用程序的 metadata。我们希望使应用程序通用，以便无论调用什么模块，都会提取元数据以确定模型中所需的字段，将调用所需数据的过滤部分相应地填充到模型中并显示在通用模板中，它将是全局的并在整个应用程序中使用。
metadata包括buttons、panels、attributes（每一项都包含多层数据）等，每项可使用一次或在通话中多次或根本没有。例如，为了显示应用程序，需要 attributes 用于在 table 中显示，以及 buttons 用于添加、删除更新等。单击 panel 可能是需要说，添加一个特定的记录，它本身可能包含各种字段。
Sugar 实例显示数据中的 导联 ，请注意它如何包含各种组件。
请注意，我确实了解如何对 data 和 metadata 进行 REST API 调用。但是如何将它变成通用的 元驱动 应用程序是我正在努力解决的问题。提前致谢！
如果我理解正确，您正在寻找某种基于从 REST 端点返回的数据的通用 UI 构建器。 Ember 提供 component 助手。
The
{{component}}helper can be used to defer the selection of a component to run time. The{{my-component}}syntax always renders the same component, while using the{{component}}helper allows choosing a component to render on the fly. This is useful in cases where you want to interact with different external libraries depending on the data. Using the{{component}}helper would allow you to keep different logic well separated.
{{#each model as |post|}}
{{!-- either foo-component or bar-component --}}
{{component post.componentName post=post}}
{{/each}}
阅读 here 以获得更详尽的解释。
您基本上需要做的是为 metadata 中的每个可能属性构建一堆不同的组件。您的模型将包含它们应该渲染的组件，您将使用 component 助手来动态渲染正确的元素。
如果您使用的是基于 table 的方法，请查看 ember light table。他们在如何为 table 构建列并支持自定义组件方面充分利用了这种方法：
columns: computed(function() {
return [{
label: 'Avatar',
valuePath: 'avatar',
width: '60px',
sortable: false,
cellComponent: 'user-avatar'
}, {
label: 'First Name',
valuePath: 'firstName',
width: '150px'
}];
})
正如您在此处看到的，列是一般呈现的，它们使用 cellComponent 属性 来确定要呈现的组件类型。