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

Question

我看到了3种方法。

1. 在*.html.eex
2. 使用渠道使用<%= %>内<script>将数据传递到的Javascript
3. 构建JSON API

＃1似乎是最简单的，但我找不到或者想的好办法呢。

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

Answer 1

（2）如果您不想实时更新，则不是一个好主意。 （3）如果您不想使用AJAX加载数据，可能太不必要地复杂了。你应该使用（1）如果你只需要一些数据可以从JS访问，并且不想在没有整个页面重新加载的情况下改变它。

由于有效的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（无元组数据），只有该用户被允许查看的字段

。

Answer 2

我绝不会使用一个<script></script>，在我的项目，我有这样的模式：

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

我总是提供在主屏中的当前环境下，我有一个config.js文件具有t他为正确的环境提供了正确的数据。

当我需要一些数据传递给我的javascript我做这样的事情在我看来：

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

如果抽象与一些助手（酏剂侧），你可以这样做：

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

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

class ZombieController extends Controller 

    setup: -> 

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

    # I can do 
    zombies = @options.zombies 

嗯，这只是一个例子，你应该适应你的当前项目。关键是抽象。

希望它有帮助:)

Answer 3

最佳实践取决于您的前端。

如果你基本上是用JavaScript运行的HTML服务。将数据注入html或通过脚本标记

如果您正在构建反应/角度/前端，请考虑使用API​​和/或通道。

一般来说，如果它是一个重要的Web应用程序，需要通过JavaScript处理数据，我会去API/Channel路线。

Answer 4

您也可以使用十六进制PhoenixGon它使用第一种方式将Phoenix变量传递给Javascript。它从控制器和Mix.env获取所有变量，并生成带有JSON的<script>标记以及访问此数据的方法。查看其他答案here。这就像：

def index(conn, _params) do  
    conn = put_gon(conn, [users: Repo.all(Users), zompies: Repo.all(Zombies)]) 
    render(conn, "index.html", current_user: get_session(conn, :current_user)) 
end 

而且在JS代码：

window.Gon.getAsset('users') #=> [user list] 
windoe.Gon.isDev() # => true 

而且你不需要创建@vars并保持清晰。

而对于zommbies.coffee：

class ZombieController extends Controller 

    setup: -> 

    zombies = window.Gon.getAsset('zombies')