2015-10-11 6 views
5

Ich habe eine Vorlage für die Top-Navigation meiner App in top_navigation.html, die die "Anmelden", "Registrieren" enthält, und wenn Sie angemeldet sind, die "Abmelden" -Links.Phoenix Framework: Senden gerenderten Vorlage in JSON Antwort

<%= if logged_in?(@conn) do %> 
    <li><%= link "Sign out", to: session_path(@conn, :delete), method: :delete %></li> 
<% else %> 
    <li><a href="#" class="js-register" data-toggle="modal" data-target=".js-register-modal">Sign up</a></li> 
    <li><a href="#" class="js-login" data-toggle="modal" data-target=".js-login-modal" >Sign in</a></li> 
<% end %> 

Ich lüge den Benutzer in über AJAX, aber sobald sie angemeldet sind, würde Ich mag die Top-Navigation mit der neu gerenderten Vorlage auszulagern (zeigt den „Abmelden“ Link), zurück an der Client in der Login-Antwort.

Gibt es eine Möglichkeit, die gerenderte Vorlage als Teil der JSON-Antwort zu senden?

Etwas entlang der Linien von:

defmodule MyApp.SessionController do 
    use MyApp.Web, :controller 

    def create(conn, %{"user" => user_params}) do 
    case MyApp.Session.login(user_params, MyApp.Repo) do 
     {:ok, user} -> 
     conn 
     |> put_session(:current_user, user.id) 
     |> json %{ top_navigation: render("top_navigation.html") } 
            # ^^^^ this doesn't work ^^^^ 
     :error -> 
     conn 
     |> put_status(404) 
     |> json %{ message: "Unable to sign in." } 
    end 
    end 

    def delete(conn, _) do 
    conn 
    |> delete_session(:current_user) 
    |> put_flash(:info, "Signed out.") 
    |> redirect(to: "/") 
    end 
end 

Und das Javascript:

$(".js-login").on("click", e => { 
    e.preventDefault() 
    $(".js-login-alert").hide() 
}) 
$("#login").on("submit", e => { 
    e.preventDefault() 

    let form = $("#login") 
    let data = { _csrf_token: $('input[name="_csrf_token"]').val(), 
       user:  { email: form.find('input[name="email"]' ).val(), 
           password: form.find('input[name="password"]').val() } } 

    $.ajax({ 
    type: "POST", 
    url: "/login", 
    data: data, 
    success: e => { 
     $(".js-top-navigation").html(e.responseJSON["top_navigation"]) 
     // ^^^^^^^^^^^^^^ This is where we swap it out ^^^^^^^^^^^^^^^ 
     $(".js-login-modal").modal("toggle") 
    }, 
    error: e => { 
     let alert = $(".js-login-alert") 
     alert.text(e.responseJSON["message"]) 
     alert.show() 
    } 
    }) 
}) 

Vielen Dank im Voraus!

Antwort

4

Ja tatsächlich! Phoenix-Vorlagen sind nur Funktionen auf ihrem Ansichtsmodul. So können Sie eine Vorlage rendern, indem Sie eine Funktion aufrufen:

|> json(%{nav: Phoenix.View.render_to_string(MyView, "nav.html", conn: conn)}) 
+0

Ist das hier für XSS verfügbar? http://stackoverflow.com/questions/32918771/how-to-render-html-template-in-javascript-template-in-phoenix-framework –

Verwandte Themen