Bewährtes Verfahren, um Daten von Phoenix an Javascript zu übergeben

Question

Ich sehe 3 Möglichkeiten, dies zu tun.

1. Mit <%= %> innerhalb <script> in *.html.eex
2. Verwenden Kanäle Daten Javascript passieren
3. eine json api bauen

# 1 am einfachsten scheint, aber ich konnte eines nicht finden oder denken Gute Möglichkeit, es noch zu tun.

Hinweis: Echtzeit-Update ist nicht meine Anforderung.

Answer 1

(2) ist keine gute Idee, wenn Sie keine Echtzeit-Updates wünschen. (3) ist möglicherweise zu unnötig kompliziert, wenn Sie die Daten nicht mit AJAX laden möchten. Sie sollten (1) verwenden, wenn Sie nur einige Daten benötigen, auf die von JS aus zugegriffen werden kann, und diese nicht ändern möchten, ohne dass die gesamte Seite neu geladen werden muss.

Da gültiger JSON auch für JS gültig ist, können Sie einfach Poison.encode!() verwenden. Wenn Ihre Daten in @posts ist, können Sie dies in *.html.eex tun:

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

und dann andere JS laden, nachdem diese und Zugriff auf die Einträge der globalen POSTS Variable. (Vielleicht möchten Sie es in etwas zu Namespace wie App.posts = ...:

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

Stellen Sie sicher, @posts enthält nur Daten, die JSON konvertiert werden können (keine Tupel) und hat nur die Felder, die der Benutzer sehen darf

.

Answer 2

würde ich nie dieses Muster ich habe ein <script></script> dafür, in meinen Projekten verwenden:

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

ich die aktuelle Umgebung in dem Master-Layout immer bieten, habe ich eine config.js Datei mit t Die richtigen Daten für die richtige Umgebung. Ich mache so etwas meiner Meinung nach

Wenn ich brauche ein paar Daten zu meinem Javascript weitergeben müssen:

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

Wenn Sie abstrakt, dass mit einigen Helfern (Elixier Seite) Sie tun können:

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

in der JavaScript-Seite, wenn ich die Seite geladen extrahiere ich nur die data- Attribute und stelle sie in einer variablen options für den Stromregler:

class ZombieController extends Controller 

    setup: -> 

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

    # I can do 
    zombies = @options.zombies 

Nun, es ist nur ein Beispiel und Sie sollten das für Ihr aktuelles Projekt anpassen. Der Schlüssel ist zu abstrahieren.

Hoffe, es hilft :)

Answer 3

Best Practice auf Ihrem Frontend abhängt.

Wenn Sie im Grunde HTML mit Dribbeln von Javascript dienen.Injizieren Sie Daten in den HTML-Code oder über das Skript-Tag

Wenn Sie ein react/angular/Frontend erstellen, sollten Sie eine API und/oder Channels verwenden.

Im Allgemeinen, wenn es eine bedeutende Webanwendung ist, die Daten benötigt, um über Javascript manipuliert zu werden, würde ich die API/Kanalroute gehen.

Answer 4

Sie können auch verwenden hex PhoenixGon es verwendet die erste Möglichkeit für die Weitergabe von Phoenix-Variablen an Javascript. Es nimmt alle Variablen von Controller und Mix.env und generiert <script> Tag mit gerenderten JSON und Methoden für den Zugriff auf diese Daten. Siehe andere Antworten here. Es ist wie:

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 

Und in js Code:

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

Und Sie brauchen nicht @vars zu erstellen und frei halten.

Und für zommbies.coffee:

class ZombieController extends Controller 

    setup: -> 

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