2015-10-11 4 views
5

私のアプリのトップナビゲーションのテンプレートはtop_navigation.htmlで、「サインイン」、「サインアップ」、ログイン時に「サインアウト」リンクを保持しています。Phoenix Framework:JSONレスポンスでレンダリングされたテンプレートを送信

<%= 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 %> 

私はAJAX経由でユーザーをログイン、彼らがログインしていたら、私は新たにレンダリングされたテンプレート(リンクを「サインアウト」を示す)で上部のナビゲーションを交換したいと思いますが、バックに渡されますログイン応答のクライアント。

レンダリングされたテンプレートをJSONレスポンスの一部として送信する方法はありますか?

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 

と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() 
    } 
    }) 
}) 

感謝の線に沿って

何か!

答えて

4

はい、本当にありがとうございます。 Phoenixテンプレートは、ビューモジュール上の関数です。したがって、関数を呼び出すことによってテンプレートをレンダリングすることができます:

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

これはここに記載されているXSSにあなたをさらしていますか? http://stackoverflow.com/questions/32918771/how-to-render-html-template-in-javascript-template-in-phoenix-framework –

関連する問題