フェニックスからJavascriptにデータを渡すベストプラクティス

Question

私はこれを行う3つの方法を参照してください。 Javascriptを

にデータを渡すために*.html.eex

使用チャネルに<script>内<%= %>を使用して

＃1が最も簡単なようだが、私は見つけるか、Aを考えることができませんでしたJSON APIを構築まだそれを行う良い方法。

注：リアルタイムアップデートは私の必要条件ではありません。

Answer 1

（2）は、リアルタイムの更新を望まない場合はお勧めできません。 （3）AJAXを使用してデータをロードしたくない場合は、あまりにも不必要に複雑になる可能性があります。 JSからアクセス可能なデータが必要なだけで、ページ全体のリロードなしに変更したくない場合は、（1）を使用する必要があります。

有効なJSONも有効なJSなので、Poison.encode!()を使用できます。

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

をし、この後、他のJSをロードし、グローバルPOSTS変数を使用しての記事にアクセス：あなたのデータは@postsにある場合は、*.html.eexでこれを行うことができます。 （あなたはApp.posts = ...のようなものにそれを名前空間が必要になる場合があります。@postsだけJSONに変換（無タプル）とのみ、ユーザーが見ることが許可されているフィールドを持つことができるデータが含まれていることを確認し

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

私は私のプロジェクトで、私はこのパターンを持って、そのための <script></script>を使用することはありませんでしょう

Answer 2

：

<!-- 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に設定します。

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タグまたはscriptタグにデータを注入する

反応/角度/フロントエンドを構築する場合は、APIおよび/またはチャネルの使用を検討してください。

一般に、javascriptを使用してデータを操作する必要のある重要なウェブアプリケーションの場合は、API /チャンネルのルートに行きます。

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')