使用 JavaScript 将字符串与 currentPage.path 连接时，AEM <a href> 不工作

Question

我正在 Adobe Experience Manager 中创建一个项目，运行在我的语言切换组件的实施中遇到了问题。该组件应该允许用户单击 link 并更改页面的语言。例如，如果他们在英文页面 /content/myproject/en/home.html 上并点击它，他们应该会在 /content/myproject/fr_ca/home.html.

上结束

作为启动和运行ning 的一部分，我试图连接 currentPage.path 和 "/profile.html" 这样我至少可以让组件注册一些更改到标签中的字符串。

从英文 home.html 页面，currentPage.path 生成字符串 "/content/myproject/en/home"。将它与 /profile.html 连接起来应该会生成字符串 "/content/myproject/en/home/profile.html" 如果我使用 Sightly 来执行类似 <p>${langinfo.goToPage}</p>.

的操作，它就会生成该字符串

但是，如果我尝试这样做：<a href="${langinfo.goToPage}"></a> 组件将显示一个空白锚标记。它还会清空我在两个锚标记之间写的任何内容。

到目前为止，我已经尝试 return 将我手写的字符串 "/content/myproject/en/home/profile.html" 作为 goToPage 值，它在锚标记中起作用。另外，如果我只 return currentPage.path 就可以了。如果我尝试连接，它会拒绝像这样 <a href="It doesn't work here!"> 工作，但它会像这样工作：<a>It works here!</a>.

目前我能想到的最好结果是 currentPage.path 是一个 Java String 对象，它被 JavaScript 访问，当 JS 尝试输入它时出现问题到 Java 带有 + 的脚本字符串。如果我尝试使用 String(goToPage) 或 goToPage.toString() 将语句转换为字符串，它也不起作用。当我将它转换为字符串时似乎并不重要。我看过的一篇博客似乎暗示这是 Rhino 的问题，我应该在初始连接后执行 .toString() 。那没有用。 Whosebug 上的另一个 post 似乎指出，尝试在 JavaScript 中连接 Java String 对象可能是个问题，并指出应该考虑到这一点，但没有讨论如何处理这个问题。

我附加到字符串不是我组件的预期最终功能，但如果我不能通过连接修改字符串，似乎我很难进行搜索和替换以更改 /en/至 /fr-ca/。如果有人对我的问题有比我正在尝试的更优雅的解决方案，那将不胜感激，就像修复我正在处理的问题一样。

我已将我的代码粘贴到此处（按照建议）并post编辑了我的代码的屏幕截图以提供帮助。

Java脚本:

use(function() {
    var pageLang = currentPage.properties.get("jcr:language", "en");
    var otherLangText; 
    var currPage = currentPage.name;
    var currPagePath = currentPage.path;
    var goPage; 

    if (pageLang == "fr_ca") { 
        otherLangText = "English";
        goPage = "/content/myproject/en/index/home.html";
    } else { 
        otherLangText = "Français"; 
        goPage = "/content/myproject/fr-ca/home/home.html"; 
    };


    return {
        otherLanguage: otherLangText, 
        goToPage: goPage
    }


})

HTML:

<nav data-sly-use.langinfo="langcontact.js">
    <ul class="lang-list-container">
        <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>
        <li class="lang-list-item"><a href="/content/myproject/en/index/contact-us.html">Contact</a></li>
   </ul>
</nav>

我在这里很困惑。我做错了什么？

Answer 1

行<li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>

实际上应该是 -

<li class="lang-list-item"><a href="${langinfo.goToPage}">${langinfo.otherLanguage}</a></li>

你想做的是将一个对象传递给对象，这将不起作用，如果你想传递要在 JS 中使用的扩展，你需要在 USE 调用中这样做。请参阅此 blog.

中的示例

更新 -

只要 link 有效，您的代码对我来说就可以正常工作。

use(function() {
    var pageLang = currentPage.properties.get("jcr:language", "en");
    var otherLangText; 
    var currPage = currentPage.name;
    var currPagePath = currentPage.path;
    var goPage; 

    if (pageLang == "fr_ca") { 
        otherLangText = "English";
        goPage = currPagePath+"/profile.html";
    } else { 
        otherLangText = "Français"; 
        goPage = currPagePath+"/profile.html"; 
    };


    return {
        otherLanguage: otherLangText, 
        goToPage: goPage
    }


})

您得到空 href 的唯一可能原因是您的 link 无效，因此 linkchecker 正在删除它。如果您检查作者实例，您会看到损坏的 link 符号以及您的 link 文本。

理想情况下，您应该修复逻辑，以便生成正确有效的 link。在开发中，您可以禁用 linkchecker and/orlink 转换器，让所有 link 工作（即使是无效的 | 不推荐）。可以通过搜索 - Day CQ Link Checker Service 和 Day CQ Link Checker Transformer

在 http://localhost:4502/system/console/configMgr 中检查这两项服务

使用 JavaScript 将字符串与 currentPage.path 连接时，AEM <a href> 不工作

AEM <a href> not working when using JavaScript to concatenate string with currentPage.path

javascript

java

concatenation

rhino

aem