레일 태그 구문 값 따옴표</p> <pre><code><img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"> </code></pre> <p>이 도전 생성하려고

Question

제외 때문이다.

<%= tag "img", data: { interchange: ["[#{photo.image_url(:base).to_s}, small]", "[#{photo.image_url(:big).to_s}, medium]", "[#{photo.image_url(:desktop).to_s}, large]"] } %> 

는 HTML을 생성합니다,하지만 결과는 "가 생성됩니다

<img data-interchange="[&quot;[https://[...]base_20160529_115006.jpg, small]&quot;,&quot;[https://[...]big_20160529_115006.jpg, medium]&quot;,&quot;[https://[...]desktop_20160529_115006.jpg, large]&quot;]" /> 

으로 여전히 작동하지 않습니다.

는 JSON으로 일을 인코딩하는 ActiveSupport의 to_json을 사용할 수 있습니다 레일에서 적절한 HTML 문자열을

Answer 1

를 얻을 수있는 올바른 구문 무엇입니까. 프런트 엔드의 데이터를 사용해야하는 경우, getAttribute를 통해 또는 jQuery를 data으로 값을 검색하면 당신이 JSON.parse를 사용할 수있는 프런트 엔드에

<img data-interchange="[[\"assets/images/interchange/base.jpg\",\"small\"],[\"assets/images/interchange/big.jpg\",\"medium\"],[\"assets/images/interchange/desktop.jpg\",\"large\"]]" /> 

그리고 생산

<%= tag "img", data: { interchange: [[photo.image_url(:base), 'small'], [photo.image_url(:big), 'medium'], [photo.image_url(:desktop), 'large']].to_json } %> 

.

var text = JSON.parse(element.getAttribute('data-interchange'));