Ember.js 如何在emberJS中构建元驱动的应用程序

注意：由于我的母语不是英语，因此本文中使用的英语和术语可能有点不合规则。请放心，我已经尽了最大努力使它尽可能可读，如果我错过了任何东西，请在否决投票前发表评论，这样我就可以相应地更新问题，我对此还是新手

因此，我在互联网上搜索了大部分内容，寻找解决方案，以找到一个教程，指导我在EmberJS上构建应用程序的元数据驱动方法。关于Ember的文档没有解释任何有关该方法的内容，只是extractMeta的函数定义，以及如何处理元数据的基本概述

我想要实现的是构建一个门户，使用Sugar作为应用程序的后端。应用程序将使用RESTAPI进行调用，以提取应用程序的数据和元数据。我们希望使应用程序具有通用性，这样无论调用哪个模块，都会提取元数据以确定模型中所需的字段，调用中所需数据的过滤部分会相应地填充到模型中，并在通用模板中显示，这将是全局的，并在整个应用程序中使用

元数据包括各种项目，如按钮、面板、attributeseach等，其中包含多层数据，每个项目在调用中可以使用一次或多次，也可以不使用。例如，为了显示应用程序，需要在表中显示属性，以及用于添加、删除、更新等的按钮。单击后，可能需要面板来添加特定记录，该记录本身可能包含各种字段

例如，默认的Sugar实例显示数据中的Lead，请注意它如何包含各种组件

这里是我单击leads列表中的create按钮时显示的面板的另一个示例，请注意面板中显示的字段

---

请注意，我确实理解如何对数据和元数据进行RESTAPI调用。但如何将其转化为一个通用的元驱动应用程序是我正在努力解决的问题。提前谢谢

如果我理解正确，您正在寻找某种基于REST端点返回数据的通用UI生成器。Ember提供组件帮助器

{{component}}辅助程序可用于推迟选择 组件的运行时间。{{my component}}语法始终呈现 相同的组件，而使用{{component}}辅助程序允许选择 要动态渲染的组件。这在您需要的情况下非常有用 根据数据与不同的外部库交互。 使用{component}}助手将允许您保持不同的逻辑 分离得很好

阅读以获得更全面的解释

您基本上需要做的是为元数据中的每个可能属性构建一组不同的组件。您的模型将包含它们应该渲染的组件，您将使用组件帮助器动态渲染正确的元素

如果您使用的是基于表的方法，请查看。他们在如何为表构建列和支持自定义组件方面充分利用了这种方法：

columns: computed(function() {
    return [{
      label: 'Avatar',
      valuePath: 'avatar',
      width: '60px',
      sortable: false,
      cellComponent: 'user-avatar'
    }, {
      label: 'First Name',
      valuePath: 'firstName',
      width: '150px'
    }];
  })

---

正如您在这里看到的，列是以常规方式呈现的，它们使用cellComponent属性来确定要呈现的组件类型

如果我理解正确，您正在寻找某种基于REST端点返回数据的通用UI生成器。Ember提供组件帮助器

{{component}}辅助程序可用于推迟选择 组件的运行时间。{{my component}}语法始终呈现 相同的组件，而使用{{component}}辅助程序允许选择 要动态渲染的组件。这在您需要的情况下非常有用 根据数据与不同的外部库交互。 使用{component}}助手将允许您保持不同的逻辑 分离得很好

阅读以获得更全面的解释

您基本上需要做的是为元数据中的每个可能属性构建一组不同的组件。您的模型将包含它们应该渲染的组件，您将使用组件帮助器动态渲染正确的元素

如果您使用的是基于表的方法，请查看。他们在如何为表构建列和支持自定义组件方面充分利用了这种方法：

columns: computed(function() {
    return [{
      label: 'Avatar',
      valuePath: 'avatar',
      width: '60px',
      sortable: false,
      cellComponent: 'user-avatar'
    }, {
      label: 'First Name',
      valuePath: 'firstName',
      width: '150px'
    }];
  })

---

正如您在这里看到的，列是以常规方式呈现的，它们使用cellComponent属性来确定要呈现的组件类型

很难说出这里要问的是什么，这个问题也无法以目前的形式得到合理的回答。请阅读并提供以下内容和/或邮政编码示例：

---

感谢你的建议，我会从现在开始检查这些。我知道这看起来很模糊，写得不好。很难说出这里要问什么，这个问题也无法以目前的形式得到合理的回答。请阅读并提供您所做工作的上下文和/或后代码示例，以及您想要做的事情的清晰解释。感谢您的建议，我将从现在开始检查这些内容。我理解这看起来很模糊，写得不太好。你可能想考虑生成动态表的另一个插件。虽然ember light table采用基于配置的方法，但ember Context table使用的是基于模板的方法，这在我看来更像ember。感谢@sunrize920，这是一个非常生动的解释，正好说明了我想知道的内容。我真的没有在图片中提到组件，但由于您的详细回答，现在我确实了解了如何进行该过程@穆罕默德·阿帕扎投票是表示你喜欢答案的最好方式@jelhan我认为你是对的，基于模板的方法比基于配置的方法更适合ember体系结构，尽管可能必须先研究这两种方法，以确定哪一种更适合我。谢谢@SuniZe920我做了：我的连接挂在我身上，必须刷新，道歉：/另一个插件，你可能要考虑生成动态表是。虽然ember light table采用基于配置的方法，但ember Context table使用的是基于模板的方法，这在我看来更像ember。感谢@sunrize920，这是一个非常生动的解释，正好说明了我想知道的内容。我真的没有在图片中提到组件，但由于您的详细回答，现在我确实了解了如何进行该过程@穆罕默德·阿帕扎投票是表示你喜欢答案的最好方式@jelhan我认为你是对的，基于模板的方法比基于配置的方法更适合ember体系结构，尽管可能必须先研究这两种方法，以确定哪一种更适合我。谢谢@SunRize 920我做到了：，我的连接挂断了，必须刷新，抱歉：/