在Rails视图中添加css类或html文本的最佳方式

Question

Rails开发人员！我得到了一个"；最佳实践"；这里的问题。所以我正在处理一些非常简单的事情，但这对我来说已经足够理解了。

我在Rails视图中得到了这个头部的一部分，并且我正在使用design来验证用户。我在模式中显示登录表单和我的注册表单

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

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

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

也许这不是正确的语法，但我只想说明我想要实现的目标。我是DRY代码的忠实信徒，我知道有一种方法可以管理未复制的代码，包括视图本身。我将感谢你为实现这一目标所提供的帮助。

Answer 1

您走在了正确的轨道上：您可以将相同的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>

然后像这样渲染模型：

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

注意局部变量name是如何在分部中用于生成正确的id和label的。以及如何将分部中的yield替换为render调用块中提供的HTML。

请参阅Rails Guides中的使用Partials简化布局中的视图和在Rails中渲染。