在 JavaScript 中使用 Ruby 变量

Question

我是 Ruby 的新手，所以我对在整个代码库中使用一些变量有疑问。 我在 Ruby 文件中声明了一个变量，如下所示：

@pages = 350

现在，我知道在 HAML 中，我可以简单地执行以下操作： -if @pages = 350 ，在带有内联 javascript 的 HAML 中，我可以执行以下操作：

:javascript
   console.log("#{@pages}");

但是，我在我的 HAML 文档中链接了一个外部 JavaScript 文件，我想知道是否可以在我的外部 JS 文档中使用我的 Ruby 变量？ 我需要一些变量来构建我想要构建的东西。 谢谢！

根据答案之一更新：

在我的 HAML 文件中，我有以下内容：

:javascript
   printPages(3);

在我的外部 JS 文件中，我有：

$(function() { 
   window.printPages = function(pages) { 
        console.log(pages);
    }
});

Answer 1

我正在加载 static javascript 文件我真的不建议尝试将变量插入该代码。

相反，请考虑如何将其提供给 javascript 代码。

---

您可以将其作为参数发送到该代码。

<script type="text/javascript" src="./my-external-script.js"></script>

:javascript
  runMyExternalFunction(#{@pages})

---

或者您可以将变量添加为页面上的数据属性，并且您的 javascript 可以在加载时查找它。

哈姆尔：

%body data-pages=@pages

JS：

console.log(document.body.dataset.pages) // value of @pages

---

更新您的 javascript：

使用 jquery 的页面就绪事件$()来声明function 是一个坏主意。 这意味着它等待页面上的所有内容完全加载，然后声明您的页面需要的 function。

您应该做的是立即设置所有需要的 function，然后在加载页面时调用这些函数。

他们按照你的方式，加载页面，执行printPages() （它还不存在），然后在创建所有printPages并将其放入全局 scope 之后。

因此，从您的外部脚本中删除$()并将其添加到您的 HAML 中。

事实上，如果您没有在转译或捆绑方面做任何超级花哨的事情，那么您可以简单地在您的外部 JS 文件中声明 function，它将在全球范围内可用。 这不适用于您的代码，因为它们以您声明 function 的方式，它只能用于该$()回调中的代码。

// js file
function printPages(pages) { 
    console.log(pages);
}

哈姆勒：

$(() => {
  printPages({@pages})
})