在HTML标签中编写条件的最佳实践是什么？

Question

在HTML标签中编写条件的最佳实践是什么？

htmlruby-on-rails

3

这个问题肯定已经被问过了，但是我没有找到它。

我经常被迫在视图中编写像这样的代码：

<div class="<%= c ? 'my_class' : 'my_other_class' %>">
<div class="<%= 'my class' if c %>">
<div<%= c ? 'class="my_class"' : 'id="my_div"' %>>

或者（更漂亮的方式，但阅读起来不太容易）:

<% div_inner = capture do %>
   ...
<% end %>

<% if c %>
  <div class="my_class"><%= div_inner %></div>
<% else %>
  <div><%= div_inner %></div>
<% end %>

最后一段：

<% div_inner = capture do %>
   ...
<% end %>

<%= content_tag(:div, div_inner, (c ? { :class => "my_class" } : {})) %>

我发现所有这些解决方案在语法上都有点不太规范。我相信有更好的方法，但是具体是什么呢？欢迎分享你自己的经验。

- pierallard

1

只是一个提示：你应该添加CSS类，而不是使用内联的 style="display:none"。内联样式通常是一个不好的想法。 - James Donnelly

詹姆斯·唐纳利> 当然。这种风格只是为了展示另一个“不规范语法”的例子。我用id属性替换它，更加“正确”。 - pierallard

如果多个元素可能会被样式化为 display:none，那么使用类会更合适。ID是唯一的，而类不是。使用 <div<%= c ? 'class="my_class"' : 'class="hidden"' %>> 并搭配 .hidden { display:none; } 的方式比使用内联样式更好。 - James Donnelly

3个回答

1

我不是content_tag :div的忠实粉丝，因为我发现它使代码难以维护且非常难以追踪。在局部视图、辅助函数和JavaScript之间，可能需要一个小时才能找到如何将类分配给元素。

无论如何，在这种情况下，例如 <div class="<%= c ? 'my_class' : 'my_other_class' %>"> 我通常只尝试将类名作为对象的属性构建。例如，假设标签根据对象处于激活或取消状态而获得不同的类。

然后我的

看起来像这样： <div class="first-class <%= record.state %>">.....</div> 然后我的CSS有.active{}和.cancelled{}定义。这并不能消除所有的erb标记，但确实使它们更简单。您可能会得到一些奇怪的CSS类名，但我发现这比混乱的erb代码更容易处理。

还有这个：

<div<%= c ? 'class="my_class"' : 'id="my_div"' %>>

这看起来对我来说是错的。id和class是语义上不同的东西，不应以这种方式混合在一起。这样会非常难以调试。

- mastaBlasta

0

根据您所做的事情，如果条件c有点“全局”（例如当前页面的名称、语言、用户是否已登录、现在是早上还是晚上等），将其设置为元素的CSS类可能是有意义的，以便输出如下：

<body class="is_home_page lang_en is_logged_in">

并使用CSS完成其余部分：

body.is_home_page .classname { color: red }
body.is_sub_page .classname { color: green }

这将使整个HTML更易于阅读。

- Pekka

我的问题是关于在 HTML 标签中直接放置一些条件时要使用的语法。换句话说：这些条件意味着您的 body 类将是 "is_home_page" 或 "is_another_page"。 - pierallard

@Forget 对啊，我想我的观点是，如果将这些内容移动到一个标签，即“body”中，“如何”就变得不那么重要了，因为你只在一个区域“污染”它。 - Pekka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Reedy · Accepted Answer

你的猜测是正确的，有更好的方法。在视图中放置条件逻辑违背了MVC的精神。根据你的例子，你可以使用一个简单的帮助方法，而不是网上读到的更复杂的实现。

你可以创建一个像这样的帮助方法：

def conditional_div(condition, true_class, false_class)
  content_tag :div, class: (condition ? true_class : false_class) do
    yield if block_given?
  end
end

然后在您的视图中，您可以像这样使用新的助手

<%= conditional_div(c, 'my_class', '') do %>
  <p>Your content</p>
<% end %>