如何在视图模板中仅在轨道表单中添加显示/隐藏操作

Question

我是 rails 的新手，用于设计身份验证，我想完成的是用户隐私。

意思是在编辑表单中，我想添加一个切换开关操作，例如"电子邮件字段"，以使用户能够显示/隐藏其配置文件中的字段，但表单仍显示在编辑视图中。

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<div class="container mt-5">
<div class="row">
<div class="col-sm-3">
<!-- Left menu links -->        
<ul class="nav-item pl-0">
<h4 class="nav-link disabled mb-0 text-dark font-weight-bold">Settings</h4>
<%= link_to 'Personal information', "/users/edit", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Account settings', "/account/settings", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Password settings', "/account/passwords", class: "nav-link text-dark font-weight-bold" %>
<%= link_to 'Security', "/account/security", class: "nav-link text-dark font-weight-bold" %>
</ul>
</div>
<!-- Right from inputs -->
<div class="col-sm-9 shadow-sm border border-dark p-3 mb-5 mx-3 mx-sm-0 mx-lg-0 mx-xl-0 bg-white rounded">
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">First name:</label>
</div>
<div class="col-sm-4">
<%= f.input :first_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "First name"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">Last name:</label>
</div>
<div class="col-sm-4">
<%= f.input :last_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Last name"} %>
</div>
</div>
<div class="dropdown-divider my-4"></div>
<label class="text-dark font-weight-bold px-3 mb-4">Biography</label>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">About:</label>
</div>
<div class="col-sm-10">
<%= f.input :about, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Write in few lines something about yourself and what you are passionate about"} %>
</div>
</div>
<div class="dropdown-divider mt-5 mb-4"></div>
<label class="text-dark font-weight-bold px-3 mb-4">Career</label>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">Company:</label>
</div>
<div class="col-sm-10">
<%= f.input :company, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Where do you work?"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">Job title:</label>
</div>
<div class="col-sm-10">
<%= f.input :job_title, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Current working position?"} %>
</div>
</div>
<div class="form-inline form-group">
<div class="col-sm-2">
<label class="text-dark font-weight-bold  justify-content-start">School / University:</label>
</div>
<div class="col-sm-10">
<%= f.input :school, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Name of school or university"} %>
</div>
</div>
<!-- Right update button -->
<div class="form-inline justify-content-end py-2 px-3">
<div class="col-sm-2">
<%= f.button :submit, "Update", class: "btn btn-primary btn-sm btn-block" %>
</div>
</div>
</div>   
</div>
</div>
</div>
<% end %>

我做了一个定制的设计注册控制器

app/controllers/registations_controller.rb
class RegistrationsController < Devise::RegistrationsController
def update
self.resource = resource_class.to_adapter.get!(send(:"current_#{resource_name}").to_key)
prev_unconfirmed_email = resource.unconfirmed_email if resource.respond_to?(:unconfirmed_email)
resource_updated = update_resource(resource, account_update_params)
yield resource if block_given?
if resource_updated
set_flash_message_for_update(resource, prev_unconfirmed_email)
bypass_sign_in resource, scope: resource_name if sign_in_after_change_password?
respond_with resource, location: after_update_path_for(resource)
else
clean_up_passwords resource
set_minimum_password_length
session[:return_to] ||= request.referer
redirect_to session.delete(:return_to), alert: resource.errors.full_messages[0]
end
end

def settings
@user = current_user
if @user
render :settings
else
render file: 'public/404', status: 404, formats: [:html]
end 
end
def passwords
@user = current_user
if @user
render :passwords
else
render file: 'public/404', status: 404, formats: [:html]
end
end
def security
@user = current_user
if @user
render :security
else
render file: 'public/404', status: 404, formats: [:html]
end
end  
end

app/controllers/users_controller.rb
class UsersController < ApplicationController
before_action :authenticate_user!
def show
@user = current_user
end
end

routes.rb
Rails.application.routes.draw do
get 'users/show'
root 'pages#home'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
devise_for :users, controllers: { registrations: "registrations" }
resources :user, only: [:show]
devise_scope :user do 
get 'accounts/settings', to: 'registrations#settings', as: :settings
get 'accounts/passwords', to: 'registrations#passwords', as: :passwords
get 'accounts/security', to: 'registrations#security', as: :security
end 
end

Answer 1

您需要做 3 件事：

• 添加一个带有 onclick 处理程序的按钮，允许用户单击它以隐藏/显示字段
• 将 ID 添加到用于显示属性的div 中
• 创建一个 JavaScript 函数来显示/隐藏该div

因此，将按钮添加到您隐藏的div 之外并包括 onclick

<%= button_tag "Hide/Show", :onclick => "hideInput()" %>

然后将 ID 添加到要隐藏的div 中。在您的情况下，请执行此类操作。您可以使用所需的任何 ID。我的只是一个例子。

<div id="emailDisplayed" class="text-dark"> <%= @user.email %> </div>

然后，您想在javascript文件中添加hideInput函数。最好在assets/javascripts/[file_name]

function hideInput() {
var emailDiv = document.getElementById("emailDisplayed");
emailDiv.style.display === "block" ?  emailDiv.style.display = 'none' : emailDiv.style.display = 'block';
}

现在，当用户单击按钮时，它将隐藏/显示包含用户电子邮件的div。