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

Question

我看到了 3 种方法。

使用 <%= %>内<script>在 *.html.eex

使用 channel 将数据传递给 Javascript

构建 json api

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

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

Answer 1

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

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

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

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

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

如果你用一些助手( Elixir 方面)抽象它，你可以这样做:

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

在 javascript 方面，当我加载页面时，我只是提取了 data-属性并将它们设置在变量 options 中对于当前 Controller :

class ZombieController extends Controller

  setup: ->

    console.log(@options) # I have all the data there.

    # I can do 
    zombies = @options.zombies

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

希望能帮助到你 :)