Javascript 中通用的用户账单页面 URL 不起作用

开发
1

所以我已经知道 /my/billing/subscriptions 是链接当前用户到其个人资料（特别是 Discourse Subscriptions 附带的账单部分）的一种方式。然而，这在我下面的代码中似乎不起作用，尤其是在 if 语句中的表达式部分。具体来说，我试图让一个按钮仅在用户的账单页面上显示。事实上，它似乎对任何以 /my 开头的 URL 都不起作用，无论是账单、偏好设置、活动还是其他任何页面。我是不是做错了什么？我应该使用什么呢？（请注意，这仅在 if 语句中不工作。在其他情况下，使用 /my 一直都能正常工作。）

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {
    api.onPageChange((url) => {

        if (url === "/my/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/back-button">
  {{#if displayCustomHomepage}} 
    <a href="https://mathbymiles.com/my/preferences" class="btn btn-default">
        <span class="d-button-label">
            返回设置！
        </span>
    </a>
  {{/if}}
</script>
2

难道不是因为用户永远不会访问 /my/* 这样的 URL，因为它们只是智能重定向吗？

例如，/my/preferences 会将我重定向到 /u/falco/preferences，所以我永远不会停留在 /my/preferences 页面，导致你代码中的 if 条件无法触发。

3

我明白了，你说得对。我理解为什么这在 if 语句中不合适，因为它永远不可能为真。那我该怎么办呢？

我尝试在 if 中改为：

url === "/u/" + user.username + "/billing/subscriptions"

其中

const user = api.getCurrentUser(),

但这似乎也没起作用……

编辑：所以，通过使用 console.log，我发现这种方法总体上没问题。例如，如果我只在脚本中放入以下代码：

const user = api.getCurrentUser()
console.log("/u/" + user.username + "/billing/subscriptions")

我就会得到期望的 /u/Miles/billing/subscriptions。

然而，问题出现在我尝试将其放入 setupComponent(args, component) {} 中时。一旦我这样做，console.log 就不再显示任何内容。我仍然不确定自己哪里做错了……

4

在 setupComponent 方法中，你能访问到 api 对象吗？我想知道这是否就是你遇到问题原因。

5

我是这么想的，因为代码中已经使用了 api.onPageChange(url)，而且它执行得很顺利。请注意，我正在从这里改编代码，所以看来我在 setupComponent 方法中确实可以访问 api 对象。

为了进一步澄清，以下是我目前的进展：

使用以下代码：

<script type="text/discourse-plugin" version="0.8">
    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

控制台会正确输出 /u/Miles/billing/subscriptions。但是，当我使用以下代码时：

<script type="text/discourse-plugin" version="0.8">
    

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

却没有任何输出。