最佳做法:在Web应用程序中设置HTML类

问题描述 投票:2回答:1

在我构建的每个Web应用程序中,都会遇到此问题。 我想有条件地在HTML元素上设置类。 例如,有时帖子的<div>看起来像:

<div class="post">...</div>

有时看起来像这样:

<div class="post even recent replied_to author_is_admin">...</div>

post每个班级都在那儿,因为某些逻辑决定了该班级。 最好的方法是什么? 在Rails + HAML中,我犯了以下行为:

-classes = []
-classes << cycle('even', 'odd')
-classes << 'recent' if post.recent?
-classes << 'replied_to' if post.replied_to?
-classes << 'author_is_admin' if post.author_is_admin?
.post{:class => classes.join(' ')}
    ...

它不是很漂亮,我已经缩短了它以使用助手,所以我可以这样做:

.post{:class => "#{cycle('even', 'odd')} #{post_classes}"}

似乎应该更容易阅读,因为这是我们一直在做的事情。 您是否有任何方法可以使该过程简短易懂?

html ruby-on-rails coding-style haml
1个回答
1
投票

我认为您所做的很好。 我只建议一些小的改进。 一种是将循环调用放在post_classes中。 出于可读性考虑,我将使post_classes接受Post参数。 这会产生一点冗余,但是您可以通过定义以下辅助方法轻松地避免它:

def classes(object)
  case object
  when Post then post_classes(object)
  end
end

这样,您的模板代码将如下所示:

.post{:class => classes(Post)}
© www.soinside.com 2019 - 2024. All rights reserved.