在 AEM 的 Touch UI 对话框中从外部服务动态加载选择选项？答案

【问题标题】：Load select options dynamically from external service in Touch UI dialog in AEM?在 AEM 的 Touch UI 对话框中从外部服务动态加载选择选项？
【发布时间】：2018-04-12 04:57:00
【问题描述】：

我的问题是在带有动态选项的触摸 UI 对话框中加载选择字段。这些选项来自通过 web 服务的外部 URL，我正在使用在我们的全局 javascript 对象之一中定义的 url 来使用这个 RESTful 服务，例如

$.get(mec.serviceConfig.baseUrl + '/movies';

请理解这些选项来自第三方网络服务，请不要提及数据源。每当我搜索动态加载选择选项时，我都会得到本教程

Link to Tutorial 这不是我想要的。

在经典 UI 中，使用 optionsProvider 很容易。

在触摸 UI 中，我正在尝试编写一个脚本，通过 AJAX ON DIALOG 加载从外部 Web 服务获取数据，并在选择字段中设置这些选项。

有没有更好更简单的方法？有人可以分享代码sn-ps吗？

【问题讨论】：

我不知道你为什么不想使用正确的Datasource？您可以编写一个漂亮、干净且可测试的 Java 类，从远程服务中获取项目。最后，它只是为特定资源类型注册的（Sling）Servlet，然后在 TouchUI 中将数据源设置为此资源类型。 servlet 被调用并返回数据源。如果你愿意，我可以为你提供一个代码示例。
这个mec.serviceConfig.baseUrl 是一个JavaScript 变量，它具有Web 服务的URL。你是说我应该调用 sling servlet 而不是直接通过 javascript 调用它，它会使用 HTTpGet 在内部调用这个服务并返回值...... duh
@Jens 太多了。只是为了在选择选项中获得一些可用的键值对/选项，用于一种创作模式，即触摸，并且仅在创作模式下使用。
最后你总是可以写一些 JS 代码来完成这一切。但是根据我的经验，这些通常是脆弱的解决方案，多年来很难可靠地编写测试和维护等。您正在用 Java 中可能更强大的解决方案与在 Javascript 中“更容易”实现的解决方案进行交易（尽管如果那样的话将是我们不会进行此对话的情况）。最后你必须根据你的项目需求来决定。
我完全同意@Jens，我在你的另一个问题中也说了同样的话。 baseurl 可能在您的 JS 中被硬编码，但这没有理由开始搞乱其他事情。 url 应该来自您的 aem 应用程序（例如，后端应该将此 url 传递给前端，反之亦然）。所以这里的架构似乎走错了方向。例如，您可以通过 OSGI 设置基本 url，并将其传递给一些 JS 配置（或使用 ajax 获取它）。但是您可以使用后端服务来实现其他东西作为数据源，例如您在后端拥有所需的所有数据。

标签： aem aem-6 aem-touch-ui

【解决方案1】：

你应该为你的组件创建 JS 监听器。

$document.on("dialog-ready", function() {
// there you should find your select field 
//for example
var language = $("[name='./language']").closest(".coral-Select");
//then append to your select field new options from your datasource
});

请参阅文档：Dynamically updating AEM TouchUI Dialog Select Fields

【讨论】：