将数据从 Phoenix 传递到 Javascript 的最佳实践

Question

我看到了 3 种方法。

#1 似乎是最简单的，但我还没有找到或想出一个好的方法来做到这一点。

注意：实时更新不是我的要求。

Answer 1

我永远不会<script></script>为此使用 a ，在我的项目中我有这种模式：

<!-- Layout -->
<div id="config"
  data-environment="..."
></div>

我总是在主布局中提供当前环境，我有一个config.js包含正确环境的正确数据的文件。

当我需要将一些数据传递给我的 javascript 时，我会做类似的事情：

<div id="app"
  data-users="..."
  data-zombies="..."
  ...
></div>

如果你用一些助手（长生不老药方面）抽象它，你可以这样做：

<%= App.Helpers.make_html(:app, [users: @users, zombies: @zombies]) %>

在 javascript 方面，当我加载页面时，我只是提取data-属性并将它们设置在options当前控制器的变量中：

<%= App.Helpers.make_html(:app, [users: @users, zombies: @zombies]) %>

好吧，这只是一个示例，您应该将其调整为您当前的项目。关键是抽象。

希望能帮助到你：）

Answer 2

(2) 如果您不想实时更新，则不是一个好主意。(3) 如果您不想使用 AJAX 加载数据，可能会过于复杂。如果您只需要可以从 JS 访问一些数据并且不想在不重新加载整个页面的情况下更改它，则应该使用 (1)。

由于有效的 JSON 也是有效的 JS，因此您可以使用Poison.encode!(). 如果您的数据在中@posts，您可以在*.html.eex：

<script>
  var POSTS = <%= Poison.encode!(@posts) %>;
</script>

然后在此之后加载其他 JS 并使用全局POSTS变量访问帖子。（您可能希望将其命名空间为App.posts = ...：

<script>
  var App = window.App || {};
  App.posts = <%= Poison.encode!(@posts) %>;
</script>

确保@posts只包含可以转换为 JSON 的数据（没有元组）并且只包含允许用户查看的字段。