Phoenix Framework Elixir：如何在 javascript 中使用辅助函数答案

【问题标题】：Phoenix Framework Elixir: How to use helper function inside javascriptPhoenix Framework Elixir：如何在 javascript 中使用辅助函数
【发布时间】：2017-05-24 23:14:06
【问题描述】：

我在视图中定义了一个辅助函数：

def usernames(id) do
  post = Repo.get(Post, id) |> Repo.preload(comments: :user)
  usernames = for comment <- post.comments do
     comment.user.username
  end
end

然后在我做的javascript文件中：

$('#comment').doThis({
   data: "<%= escape_javascript( MyApp.ApplicationHelpers.usernames(@post.id) ) %>"
});

以上行不通。当然，我需要能够传入@post.id，但即使通过硬编码像MyApp.ApplicationHelpers.usernames(5) 这样的帖子ID，也不起作用。

基本上我正在尝试做的 Rails 相当于：

@usernames = User.pluck(:username)

那么在 js.erb 中会是：

data = <% @usernames %>
$('#comment').doThis({'data': data});

如果有人可以帮忙解决这个问题...

更新：（提供更多信息）我将javascript代码放在posts.js中，如下stackoverflow answer。该文件中的其他 javascript 代码将根据需要执行。

【问题讨论】：

你能指定你的 javascript 文件在哪里以及它的扩展名吗？因为我认为您将 .eex 与 .js 混合在一起，这是不可能的。
嘿@emancu 我在问题的更新中添加了信息，正如你所问的。
How to execute elixir code in a js file?的可能重复
@PatrickOscity 非常感谢您在这个问题上停下来。您对链接问题的回答（基本上将其硬编码为数据属性）非常有帮助。在我需要 javascript 文件中的帖子 url 和帖子标题的情况下，它可以根据需要精确地工作。但是对于这个，尽管您的解决方案会奏效，但硬编码所有用户是不可行的，尤其是当用户列表增加时。
@codingbear 是的，你是对的，硬编码在这里不是一个选项，但全局 window 对象、数据属性或单独的 JSON 端点是可行的。如果您关心数据属性的大小 - in HTML 5 there is no size limit on attributes，那么您应该没问题。只是想让您知道，将 Elixir 代码嵌入静态资产中并不是 Phoenix 的真正选择，并且存在哪些解决方案来处理这种情况。

标签： elixir phoenix-framework

【解决方案1】：

@codibgbear 问题是，phoenix 会将其作为常规的 js 文件，因此它不会编译代码，这意味着您的 EEX 语法将不起作用。

您可以在模板旁边定义一个名为 _scripts.html.eex 的部分并添加以下代码

<script>
  $('#comment').doThis({
    data: "<%= escape_javascript(usernames(@post.id)) %>"
  });
</script>

然后在你的模板上，确保你正在渲染这个部分。

<%= render "_scripts.html", post: @post %>

实际上，您应该检查您的templates/layout/app.html.eex 文件，看看是否已经有一行可以神奇地呈现此文件;)

该行应如下所示：

<%= render_existing view_module(@conn), "_scripts.html", assigns %>

并且由于您在视图中定义了usernames/1 函数，因此您不需要使用整个模块名称，所以我认为这应该可以。

祝你好运！

【讨论】：

嘿@emancu，感谢您的回答。我要试试看。
嘿@emancu，我添加了你建议的代码，当我这样做的时候，你的逻辑是有道理的。我按照您的建议将这一行添加到<%= render_existing view_module(@conn), "_scripts.html", conn: @conn %> 到templates/layout/app.html.eex，但我得到assign @post not available in eex template 的错误。如何将@post 传递给可用的分配。
好吧。您实际上是在发送@conn，因此您应该能够从那里获取帖子。如果您在控制器中分配了类似“@conn.assigns.post”的内容。
最终结果如下：<%= render_existing view_module(@conn), "_scripts.html", assigns %>。如果您修改它，我可以将其标记为正确。我现在要投票。
非常感谢 @emancu 花时间写下答案以及跟进 cmets。