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

Question

Rails 开发者！我在这里遇到了一个“最佳实践”问题。所以我正在处理一些非常简单但足以让我理解的事情。

我在 Rails 视图中得到了这个 header 部分，我正在使用设计来验证用户。我在模式中显示 登录表单 和我的 注册表单 ，一切都很好。在我的 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>

现在，我不知道我是否在这里挑剔，但是，有没有办法可以将这两个部分合并为一个？例如：

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

请参阅中 布局和渲染中的 Using Partials to Simplify Views Rails 指南。

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

Best way to add css classes or html text in Rails views

ruby

ruby-on-rails

erb

ruby-on-rails-5

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

Best way to add css classes or html text in Rails views

ruby

ruby-on-rails

erb

ruby-on-rails-5

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