使用JavaScript将字符串与currentPage.path连接时，AEM 无法正常工作

I'm creating a project in Adobe Experience Manager and have run into problems in the implementation of my language switching component. The component is supposed allow the user to click on a link and have the language of the page change. For example, if they are on the English page /content/myproject/en/home.html and they click it, they are supposed to end up on /content/myproject/fr_ca/home.html.

我正在Adobe Experience Manager中创建一个项目,并且在我的语言切换组件的实现中遇到了问题。假设该组件允许用户单击链接并使页面的语言发生变化。例如,如果它们位于英文页面/content/myproject/en/home.html并且它们单击它们,它们应该最终在/content/myproject/fr_ca/home.html上。

As part of getting it up and running, I was trying to concatenate currentPage.path and "/profile.html" so that I could at least get the component to register some change to the string in the tag.

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

From the English home.html page, currentPage.path produces the string "/content/myproject/en/home". Concatenating it with /profile.html should produce the string "/content/myproject/en/home/profile.html" which it does if I use Sightly to do something like <p>${langinfo.goToPage}</p>.

在English home.html页面中,currentPage.path生成字符串“/ content / myproject / en / home”。将它与/profile.html连接应产生字符串“/content/myproject/en/home/profile.html”,如果我使用Sightly来执行类似

$ {langinfo.goToPage} 的操作,它就会生成。

However, if I try this: <a href="${langinfo.goToPage}"></a> the component will show a blank anchor tag. It will also blank anything I've written in between the two anchor tags.

但是,如果我尝试这个: 该组件将显示一个空白锚标记。它也会删除我在两个锚标签之间写的任何内容。

So far I've tried returning a string I've written out by hand "/content/myproject/en/home/profile.html" as the goToPage value and it works in the anchor tag. Also, if I only return currentPage.path it works. It refuses to work like this <a href="It doesn't work here!"> if I try to concatenate but it will work like this: <a>It works here!</a>.

到目前为止,我已经尝试将我手写的字符串“/content/myproject/en/home/profile.html”作为goToPage值返回,并且它在锚标记中起作用。此外,如果我只返回currentPage.path它的工作原理。它拒绝像这样工作

The best I can figure at this point is that currentPage.path is a Java String object that is being accessed by JavaScript and there are problems when JS tries to type it to a JavaScript string with +. It also doesn't work if I try to cast the statement as a string with either String(goToPage) or goToPage.toString(). It doesn't seem to matter when I cast it as a string. One blog I looked at seemed to hint that this was a problem with Rhino and that I should do a .toString() after the initial concatenation. That didn't work. Another post on * seemed to point out that it could be a problem trying to concatenate a Java String object in JavaScript and pointed out that this should be taken into account but didn't go into how to deal with the issue.

我现在能想到的最好的是currentPage.path是一个Java String对象,它被JavaScript访问,当JS尝试用+键入一个JavaScript字符串时会出现问题。如果我尝试将语句转换为String(goToPage)或goToPage.toString()的字符串,它也不起作用。当我把它作为一个字符串投射时似乎并不重要。我看过的一个博客似乎暗示这是Rhino的一个问题,我应该在初始连接后做一个.toString()。那没用。 *上的另一篇文章似乎指出,试图在JavaScript中连接Java String对象可能是一个问题,并指出应该考虑这一点,但没有讨论如何处理该问题。

I appending to a string isn't the intended end functionality of my component, but if I can't modify the string by concatenating, seems like I can hardly do a search and replace to change /en/ to /fr-ca/. If anyone has a more elegant solution to my problem than what I'm attempting, that would be appreciated as much as a fix for what I'm working on.

我附加到字符串不是我的组件的预期最终功能,但如果我不能通过连接修改字符串,似乎我几乎无法进行搜索并替换为/ en / to / fr-ca /。如果任何人对我的问题有一个更优雅的解决方案,而不是我正在尝试的那样,那将是我正在努力解决的问题。

I've pasted my code here (as suggested) and posted screenshots of my code to help.

我在这里粘贴了我的代码(如建议的那样),并发布了我的代码截图以提供帮助。

Javascript:

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>

I'm pretty stumped here. What am I doing wrong?

我在这里很难过。我究竟做错了什么?

1 个解决方案

#1

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

should actually be -

应该是 -

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

What you are trying to do is pass an object to object which will not work, in case you want to pass the extension to be used in JS you need to do that in the USE call. Refer to the samples in this blog.

你要做的是将一个对象传递给无法工作的对象,如果你想要传递你在JS中使用的扩展,你需要在USE调用中做到这一点。请参阅此博客中的示例。

Update -

You code works fine for me as long as the link is valid.

只要链接有效,您的代码就可以正常使用。

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
    }


})

The only possible reason you are getting empty href is because your link is not valid and thus linkchecker is removing it. If you check on author instance you will see broken link symbol along with your link text.

您获得空href的唯一可能原因是您的链接无效,因此linkchecker将其删除。如果您检查作者实例,您将看到断开的链接符号以及链接文本。

Ideally you should fix the logic so that proper valid link is generated. On development you could disable the linkchecker and/orlink transformer to let all links work (even invalid ones | not recommended). The two services can be checked in http://localhost:4502/system/console/configMgr by searching for - Day CQ Link Checker Service and Day CQ Link Checker Transformer

理想情况下,您应该修复逻辑,以便生成正确的有效链接。在开发时,您可以禁用linkchecker和/或link转换器以使所有链接都起作用(即使是无效的|也不推荐)。通过搜索 - 日CQ链路检查服务和日CQ链路检查器变换器,可以在http:// localhost:4502 / system / console / configMgr中检查这两个服务

#1