Ruby on rails 在Rails视图中添加css类或html文本的最佳方法

Rails开发者！我这里有一个“最佳实践”问题。所以我在处理一些非常简单的事情，但这对我来说已经足够理解了

我在Rails视图中得到了这个部分头，我正在使用Desive对用户进行身份验证。我在modals中显示了登录表单和我的注册表单，都很好。在my

html.erb

中，如下所示：

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/sessions/new'%>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/registrations/new'%>
            </div>
        </div>
    </div>
</div>

<%= render "shared/modal", name: 'login' do %>
  <%= render '/devise/sessions/new' %>
<% end %>

<%= render "shared/modal", name: 'register' do %>
  <%= render '/devise/registrations/new' %>
<% end %>

&时代；
&时代；

现在，我不知道我是否在这里挑剔，但是，有没有办法把这两个部分都简化成一个呢？例如：

<div class="modal fade" id="{dynamicId}" tabindex="-1" role="dialog" aria-labelledby="{dynamicModaltitle}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '{dynamic partial view}'%>
            </div>
        </div>
    </div>
</div>

&时代；

---

可能这不是正确的语法，但我只想指出我想要实现的目标。我非常相信干代码，我知道有一种方法可以管理未重复的代码，包括视图本身。我将非常感谢您的帮助。

您走上了正确的道路：您可以将相同的HTML部分移动到类似这样的部分

# in app/views/shared/_modal.html.erb
<div class="modal fade" id="<%= name %>Modal" tabindex="-1" role="dialog" aria-labelledby="<%= name %>ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= yield %>
            </div>
        </div>
    </div>
</div>

#在app/views/shared/_modal.html.erb中
&时代；

然后按如下方式渲染该模型：

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/sessions/new'%>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/registrations/new'%>
            </div>
        </div>
    </div>
</div>

<%= render "shared/modal", name: 'login' do %>
  <%= render '/devise/sessions/new' %>
<% end %>

<%= render "shared/modal", name: 'register' do %>
  <%= render '/devise/registrations/new' %>
<% end %>

注意局部变量

name

如何在partial中使用，以生成正确的

id

和

label

。以及如何用

render

调用块中提供的HTML替换部分中的

yield

---

请参阅Rails指南中Rails中的布局和呈现。

您走对了方向：您可以将相同的HTML部分移动到类似下面的部分

# in app/views/shared/_modal.html.erb
<div class="modal fade" id="<%= name %>Modal" tabindex="-1" role="dialog" aria-labelledby="<%= name %>ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= yield %>
            </div>
        </div>
    </div>
</div>

#在app/views/shared/_modal.html.erb中
&时代；

然后按如下方式渲染该模型：

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/sessions/new'%>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <%= render '/devise/registrations/new'%>
            </div>
        </div>
    </div>
</div>

<%= render "shared/modal", name: 'login' do %>
  <%= render '/devise/sessions/new' %>
<% end %>

<%= render "shared/modal", name: 'register' do %>
  <%= render '/devise/registrations/new' %>
<% end %>

注意局部变量

name

如何在partial中使用，以生成正确的

id

和

label

。以及如何用

render

调用块中提供的HTML替换部分中的

yield

<>从Rails指南中查看Rails中的布局和渲染。

我将使用<代码> <代码>代替属性中间的Erb插值。在属性的中间，我将使用<代码> <代码>代替Erb插值。