때때로 조건에 따라 html 요소에 클래스를 추가해야합니다. 문제는 깨끗한 방법을 찾을 수 없다는 것입니다. 내가 시도한 것의 예는 다음과 같습니다.

<div <%= if @status = 'success'; "class='ok'"; end %>>
   some message here
</div>

또는

<% if @status == 'success' %>
   <div class='success'>
<% else %>
   <div>
<% end %>
   some message here
</div>

나는 붐비고 읽기가 어렵 기 때문에 첫 번째 접근 방식을 좋아하지 않습니다. 두 번째 방법은 네 스팅이 망가 졌기 때문에 마음에 들지 않습니다. 모델에 넣는 것이 좋겠지 만 (같은 것 @status.css_class), 그것은 거기에 속하지 않습니다. 대부분의 사람들은 무엇을합니까?

첫 번째 방법을 사용하지만 약간 더 간결한 구문을 사용합니다.

<div class="<%= 'ok' if @status == 'success' %>">

일반적으로 부울 true또는 숫자 레코드 ID로 성공을 나타내고 부울 false또는 nil. 이렇게하면 변수를 테스트 할 수 있습니다.

<div class="<%= 'ok' if @success %>">

삼항 ?:연산자를 사용하는 두 번째 형식 은 두 클래스 중에서 선택하려는 경우 유용합니다.

<div class="<%= @success ? 'good' : 'bad' %>">

마지막으로, 제공 한 레코드를 기반으로 ID와 클래스를 자동으로 설정 하는와 같은 Rail의 레코드 태그 도우미를 사용할 수 있습니다 div_for. 주어진 PersonID 47 :

# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>

뷰에서 논리 피하기

표준 접근 방식의 문제점 if은 뷰에서 문 또는 삼진 형식의 논리가 필요하다는 것 입니다. 기본 클래스와 혼합 된 여러 조건부 CSS 클래스가있는 경우 해당 논리를 문자열 보간 또는 ERB 태그에 넣어야합니다.

다음은 뷰에 논리를 넣는 것을 방지하는 업데이트 된 접근 방식입니다.

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string 방법

class_string도우미로 구성된 키 / 값 쌍의 해시 소요 CSS 클래스 이름 문자열 과 부울 값 . 메서드의 결과는 부울 값이 true로 평가 된 클래스 문자열입니다.

샘플 사용

class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"

기타 사용 사례

이 도우미는 ERB태그 내에서 또는 link_to.

<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

<% div_for @person, class: class_string(ok: @success) do %>
<% end %>

<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>

Either / Or 클래스

삼항이 필요한 사용 사례 (예 :)의 경우 @success ? 'good' : 'bad'첫 번째 요소가 클래스 true이고 다른 요소가false

<div class="<%= [:good, :bad] => @success %>">

React에서 영감을 얻음

이 기술은 Facebook의 프런트 엔드 프레임 워크 에서 classNames(이전에는라고 함 classSet) 이라는 추가 기능에서 영감을 받았습니다 React.

Rails 프로젝트에서 사용

현재이 class_names함수는 Rails에 존재하지 않지만 이 기사 에서는 프로젝트에 함수 를 추가하거나 구현하는 방법을 보여줍니다.

특히 DOM이 레이아웃에 있고로드 된 부분에 따라 css 클래스를 설정하려는 경우 content_for 도우미를 사용할 수도 있습니다.

레이아웃에서 :

%div{class: content_for?(:css_class) ? yield(:css_class) : ''}

부분적으로 :

- content_for :css_class do
    my_specific_class

그게 다야.