rails content_tag 도우미와 함께 html5 데이터 속성을 사용하는 가장 좋은 방법은 무엇입니까?


102

물론 문제는 루비 기호가 하이픈을 좋아하지 않는다는 것입니다. 따라서 이와 같은 것은 분명히 작동하지 않습니다.

content_tag(:div, "Some Text", :id => "foo", :data-data_attr => some_variable)

한 가지 옵션은 기호가 아닌 문자열을 사용하는 것입니다.

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

또는 그냥 보간 할 수 있습니다.

"<div id='foo' data-data_attr='#{some_variable}'>Some Text</div>".html_safe

나는 다소 나중을 선호하지만 둘 다 약간 거칠어 보입니다. 누구든지 더 나은 방법을 알고 있습니까?

답변:


140

Rails 3.1은 내장 도우미와 함께 제공됩니다.

http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

예 :

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

이것은 실제로 내 URL에 항목을 추가합니다. 데이터 속성을 추가하지 않습니다.
Jim Wharton 2011

2
물론 그렇습니다 .... 그러나 url 해시와 html 옵션 해시를 모두받는 도우미를 사용하는 경우 두 해시를 중괄호 {}로 명시 적으로 래핑해야합니다. link_to 예 : link_to "label", {: action => blub}, {: data => {: foo => : bar}, : class => "test"}
reto

작동합니다 : 'data-bv-notempty-message'=> "사용자 이름이 필요합니다."
Ivan


10

도우미는 나쁜 생각은 아니지만 본질적으로 구문에 대해 까다로워지는 것에 대해 약간 과잉 인 것처럼 보입니다. 내가 바라고 있던 레일에 내장 된 것이 없다고 생각합니다. 나는 이것을 사용할 것이다 :

content_tag(:div, "Some Text", :id => "foo", 'data-data_attr' => some_variable)

6

JQuery Air (codeschool.com) 레벨 1, 예제 1

Codeschool / 플랫폼 독립적 버전

<section id="tabs">
  <ul>
    <li><a href="#2012-09-27" data-flights="6">Sep 27</a></li>
    <li><a href="#2012-09-28" data-flights="5">Sep 28</a></li>
    <li><a href="#2012-09-29" data-flights="5">Sep 29</a></li>
  </ul>
</section>

Rails 버전

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "Sep 27",:href=> "#2012-09-27", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "Sep 28",:href=> "#2012-09-28", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "Sep 29",:href=> "#2012-09-29", :data => { :flights => "5" } ) %></li>
  </ul>
</section>

5

이전 답변을 바탕으로 지금 수행하는 표준 방법은 다음과 같습니다.

content_tag(:div, "Some Text", id: "foo", data: { attr: some_variable })
content_tag(:div, "Some Text", id: "foo", data: { "other-attr" => some_variable })

다음을 생성합니다.

<div id="foo" data-attr="some variable">Some Text</div>
<div id="foo" data-other-attr="some variable">Some Text</div>

-3

언제든지 자신 만의 도우미 함수를 만들 수 있으므로 다음과 같이 작성할 수 있습니다.

<%= div_data_tag the_id, some_text, some_data %>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.