如何在js.erb文件中將本地人添加到渲染調用

Question

我有從Rails 5.0.4應用程序遠程調用的js.erb文件。

<% if @admin_invitation.present? && @admin_invitation.valid? %>
<%my_view = j (render partial: "shared/invitation_card",:user => @admin_invitation.invited_id, :email => @admin_invitation.invited_email, :type => "admin" ) %>
$(".invites.admins .row").prepend("<%=my_view %>");
<% end %>

App.refresh( "<%= j(render 'shared/alerts') %>" );

當我在部分代碼中對值進行硬編碼時，它可以按預期工作，但是當我從此js.erb文件中將它們作為本地人輸入時，它們不會通過（nil）。 值得注意的是，我從非遠程haml視圖渲染了部分視圖，並且效果很好。

這是我嘗試過的渲染方式（我知道有些已經過時，但僅用於完整性檢查）

render partial: "shared/invitation_card", :locals=> { :email => "admin@gmail.com", :type => "admin" }
render partial: "shared/invitation_card", object: "admin@gmail.com", as: "email"
render partial: "shared/invitation_card", email: "admin@gmail.com", type:"admin"
render partial: "shared/invitation_card", locals: { email: "admin@gmail.com", type: "admin" }

還有其他人在用rails 5從js.erb渲染haml局部對象時遇到問題嗎？

編輯：

這是調用上面的js.erb的控制器方法。

def create
    if params[:invited_status] == "temporary_invitation_user"
      result = CreateGroupInvitation.call(invitation_model: GroupFollowInvitation, group_id: params[:group_id], inviter: current_user, invited_email: params[:invited_email], notification: "created_group_follow_email_invitation")
    else
      result = CreateGroupInvitation.call(invitation_model: GroupFollowInvitation, group_id: params[:group_id], inviter: current_user, invited_id: params[:invited_id] , notification: "created_group_follow_invitation")
    end

    if result.success?
      @invitation = result.invitation
      @invited = params[:invited_id] == "null" ? params[:invited_email] : User.find(params[:invited_id])
      flash.now[:success] = "Your follow invitation was sent"
    else
      if result.error_message.present?
        flash.now[:info] = result.error_message
      else
        flash.now[:error] = "An error happend"
      end
    end

    respond_to do |format|
      format.js { render layout: false }
    end
  end

Answer 1

您沒有指定如何調用js.erb ，但是我建議的最佳方法如下。

第1步-構建視圖

首先，在視圖中包括帶有remote: true選項的鏈接，表單或按鈕

例如

<%= form_with(model: @invitation) do |f| %>
...
<% end %>

第2步-了解路由

route.rb用於:invitations的資源路由生成以下路由：

new_invitation GET  /invitations/new(.:format) invitations#new                           
               POST /invitations(.:format)     invitations#create                                      

並且您提交的表單中的invitations/new.html.erb視圖中的表單將對url /invitations執行POST請求。

AJAX的說明

在Web開發中，您可以在服務器和客戶端之間執行兩種類型的請求： 同步請求或異步請求 。 在同步請求中，客戶端/瀏覽器將向后端服務器執行HTTP request ，該服務器將以response 。 瀏覽器將停止並開始加載，直到收到完整的響應為止。

在異步請求中， request and response周期將不包括瀏覽器停止加載。

您的javascript文件只是客戶端/瀏覽器資產管道中包含的一個文件，這些文件是當用戶訪問位於http://yourwebsite.xyz的頁面時瀏覽器下載的所有js ， css ， images和fonts執行對該url的get請求。 您的服務器執行的響應包括所有這些信息。

因此，該js文件無法找到來自server應用程序或database查詢中的變量。 這兩件事是分開的，一是您的服務器，另一是客戶端。

如果要具有該變量並將其動態且asynchronously地添加到客戶端/瀏覽器中 ，則需要使用AJAX 。

需要從客戶端到后端服務器執行get請求，響應將包含json格式的@invitation變量

步驟3-建立您的控制器

Rails路由器在/invitations處接收POST請求，並將該請求重定向到控制器invitations操作create 。 參數通過ActionController::Parameters對象params傳遞。

運行Ruby on Rails的服務器以3種不同的格式響應請求：HTML呈現視圖JS以在前端執行腳本代碼。 客戶端已經通過資產管道下載了JS文件invitations/create.js.erb ，這只是執行該命令的命令。 JSON以json格式發送@invitation對象，它將在/invitations.json可用

# app/controllers/invitations_controller.rb
# ......
def create
  @invitation = Invitation.new(params[:invitation])

  respond_to do |format|
    if @invitation.save
      format.html { redirect_to @invitation, notice: 'Invitation was successfully created.' }
      format.js
      format.json { render json: @invitation, status: :created, location: @invitation }
    else
      format.html { render action: "new" }
      format.json { render json: @invitation.errors, status: :unprocessable_entity }
    end
  end
end

第4步-將結果異步添加到頁面

在invitations/create.js.erb您可以包含js代碼，並且可以使用invitations/create.js.erb invitations#create操作中的實例變量

$("<%= escape_javascript(render @invitation) %>").appendTo("#invitations");

有關使用AJAX和Rails的更多信息

Answer 2

我找到了答案。 其實很簡單

呈現局部“視圖”局部變量：{k1：v1，k2：v2}不會為您提供局部哈希。 它僅定義局部變量k1和k2以供您的局部變量使用。 您無需從“本地”哈希中提取它們。

渲染'view'locals：{k1：v1，k2：v2}確實為您提供了內部包含k1，v2的本地哈希。 直到您提取它們才定義它們。 這種矛盾使我無法接受。 我的代碼已經准備好讓它們位於本地哈希中。