javascript - 如何在js文件中执行elixir代码？

Question

我有一个 js“my_js_file.js”文件，我只将它包含在一个页面中。在该 js 文件中，我需要通过调用 phoenix 助手来获取 url:

# my_js_file.js

function func1(userLogin) {
  var createUserUlr = "<%= user_home_path(@conn, :create, userLogin) %>";
  //...........

但它不起作用。当我将它重命名为“my_js_file.js.eex”时，它仍然不起作用——“<%= %>”之间的值没有得到评估。为什么不？有哪些选择？请注意，我将变量传递给 url。

Answer 1

我认为这是不可能的，因为 static/ 中的 Assets 目录不由 Elixir 处理，而是由您的 Assets 管道(默认为 Brunch)处理。它们是预编译的，因此即使它有效，您也无法访问 @conn变量，因为这在编译静态 Assets 时不可用。

请记住，这是一件好的事情!服务器不需要在每次页面请求时重新呈现您的 Javascript。

您有几种选择来获得所需的结果:

硬编码

可能看起来很老套，但对于简单的情况来说已经足够好了。我建议硬编码一个路径，使用 //在开始时保留当前协议(protocol) (http/https)。如果需要将其解析为完整的 URL，可以使用 this trick .

数据属性

对于一次性使用，您可以添加 data attribute到标记的相关部分，例如登录表单:

<div id="create-user" data-url="<%= user_home_path(@conn, :create, userLogin) %>">
  <!-- ... -->
</div>

然后在您的 JavaScript 中，您可以访问数据属性。请注意，根据您的用例，可能有比使用 document.querySelector 更好的方法来检索包含数据属性的 DOM 节点。 ，这只是一个例子:

let createUserUrl = document.querySelector("#create-user").getAttribute("data-url");

如果您只需要针对 IE11+ 或愿意使用 polyfill , 你也可以使用 dataset

let createUserUrl = document.querySelector("#create-user").dataset.url;

或者如果您使用的是 jQuery:

let createUserUrl = $("#create-user").data("url");

也许您可以从不同的属性中提取 URL，例如 url的 form , 你应该覆盖 onclick例如，提交按钮的处理程序。

在 window 上添加属性对象

对于 真正 全局值，例如身份验证 token 等，您可以在 window 上设置一个属性对象，例如 web/templates/layout/app.html.eex

<script>window.userToken = "<%= assigns[:user_token] %>";</script>

然后在您的 JavaScript 中，您可以简单地访问

window.userToken

其他解决方案

对于这个问题还有更高级的解决方案，包括:

• 添加一个单独的 JSON 端点，以 JSON 形式返回所需的数据，然后可以从您的 JavaScript 请求该数据

• 如果您使用 React.js、Vue.js 等 JavaScript 框架，您可能能够利用框架或辅助 JavaScript 包中的路由逻辑。

我敢肯定还有更多我现在没有想到的选择。