Phoenix Framework: Gửi mẫu trả về trong phản hồi JSON

Question

Tôi có mẫu cho điều hướng trên cùng của ứng dụng trong top_navigation.html chứa mẫu "Đăng nhập", "Đăng ký" và khi đăng nhập, liên kết "Đăng xuất".

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

tôi đăng nhập người sử dụng trong thông qua AJAX, nhưng một khi họ đang đăng nhập, tôi muốn trao đổi trên thanh điều hướng trên với các mẫu mới được trả lại (hiển thị các liên kết "Đăng xuất"), thông qua trở lại khách hàng trong phản hồi đăng nhập.

Có cách nào để gửi mẫu được hiển thị như một phần của phản hồi JSON không?

cái gì đó dọc theo dòng:

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 

Và 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() 
    } 
    }) 
}) 

Cảm ơn rất nhiều trước!

Answer 1

Có thực sự! Các mẫu Phoenix chỉ là các chức năng trên mô-đun xem của chúng. Vì vậy, bạn có thể hiển thị mẫu bằng cách gọi hàm:

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