Question

我们有一个要求，即应根据页面属性提供的路径将页面移动到某个位置。

如何在Touch UI中实现该功能？在Classic UI中，我们可以使用编辑配置，并可以使用监听器并在其上编写相应的JS代码。如果我错了，请更正我。

Answer 1

您的问题暗示要使用JavaScript来移动页面。我使用Touch UI对话框汇总了一个示例。它可以工作，但需要抛光来验证用户输入并防止字符串操作错误。

在此示例中，我使用保存对话框后触发的dialog-success事件。见Touch UI Events。我检查是否填充了带有CSS选择器的文本字段，如果是，我使用@MoveFrom suffix回发到Sling Post Servlet以移动节点及其子节点（页面和jcr：content，等等...）。如果该操作成功，请将用户导航到新页面。

在对话框中，添加一个文本字段并为其指定一个唯一的类名：

<movePage
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/textfield"
    fieldLabel="Move page to:"
    class="move-page"/>

然后将此JavaScript添加到仅在创作模式中使用的ClientLib，例如cq.authoring.editor：

(function ($, $document) {
    'use strict';

    $document.on("dialog-success", function(e) {
        var newPath,
            lastSlash,
            moveFromSuffix,
            newDirectory,
            currentPath,
            data;

        e.stopImmediatePropagation();

        newPath = $('.move-page').val();

        if (newPath) {
            lastSlash = newPath.lastIndexOf('/');
            moveFromSuffix = newPath.substring(lastSlash + 1) + Granite.Sling.MOVE_SUFFIX;
            newDirectory = newPath.substring(0, lastSlash);
            currentPath = Granite.HTTP.getPath().replace('/editor.html', '');
            data = {};
            data[moveFromSuffix] = currentPath;

          $.post(newDirectory, data)
              .done(function(){
                  window.location = '/editor.html' + newPath + '.html';
              })
              .fail(function(){
                  $(window).adaptTo('foundation-ui').alert('Alert', 'Could not move page');
              });
        }
    });
})($, $(document));

但是，另一个选择是通过实现自定义Sling Post Processor来执行服务器端。

移动AEM根据页面属性上的路径触摸UI页面

1 个答案: