Haml에 인라인 JavaScript를 어떻게 포함합니까?

122

템플릿에 포함하기 위해 이와 같은 것을 어떻게 작성할 수 있지만 Haml에는 있습니까?

<script>
$(document).ready( function() {
  $('body').addClass( 'test' );
} );
</script>
javascript  jquery  haml 
— 푸 에고 드 바시
소스

답변:

26

Chris Chalmers가 대답에서 실제로 수행하는 작업을 실제로 수행 할 수 있지만 HAML이 JavaScript를 구문 분석하지 않도록해야합니다. 이 접근 방식은 실제로 내가해야했던 것과 다른 유형을 사용해야 할 때 유용 text/javascript합니다 MathJax.

plain필터를 사용하여 HAML이 스크립트를 구문 분석하고 잘못된 중첩 오류를 발생시키지 않도록 할 수 있습니다 .

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });
— Alexander van Oostenrijk
소스
: plain 필터는 자바 스크립트 템플릿 문제를 해결하는 데 매우 유용합니다. 감사! 나는 haml에 js 템플릿을 많이 포함하는 fileupload-jquery ( blueimp.github.io/jQuery-File-Upload )를 사용 하고 있으며 : plain 필터 만 작동합니다! 자세한 내용은 내 대답을 읽으십시오.
— karl li
19

그래서 나는 위의 : javascript를 시도했습니다 :) 그러나 HAML은 생성 된 코드를 CDATA에 다음과 같이 래핑합니다.

<script type="text/javascript">
  //<![CDATA[
    $(document).ready( function() {
       $('body').addClass( 'test' );
    } );
  //]]>
</script>

다음 HAML은 (예 :) typekit 또는 google 분석 코드를 포함하기위한 일반적인 태그를 생성합니다. 

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!
— 크리스 찰머스
소스
Haml은 CDATA나를 위해 추가 하지 않았으며 %scriptjs에 불규칙한 들여 쓰기가 있으면 나를 위해 일하지 않았습니다 .
— agmin
작동하지 않는이, 일반 텍스트 exeption 내에서 불법 중첩을 던져
— 마르코 프린스
예를 들어 <script> 태그에 속성을 추가해야하는 경우 더 잘 작동합니다. id (원래 질문에 있음). 저는 haml 4.0.7을 사용하고 있습니다 – – 당신은 그것이 중요하지 않다고 생각합니다 (제 생각에) haml 옵션 (--cdata)에서 cdata 래퍼를 끌 수 있습니다.
— Maciek Rek
2

haml에서 fileupload-jquery 를 사용하고 있습니다. 원래 js는 다음과 같습니다.

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
      {% if (file.error) { %}
        <td></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
        <td class="preview">{% if (file.thumbnail_url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
          {% } %}</td>
        <td class="name">
          <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
        </td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td colspan="2"></td>
        {% } %}
      <td class="delete">
        <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
          <i class="icon-trash icon-white"></i>
          <span>{%=locale.fileupload.destroy%}</span>
        </button>
        <input type="checkbox" name="delete" value="1">
      </td>
    </tr>
    {% } %}
</script>
스 니펫 확장

처음에는 html2haml:cdata 에서 변환 하는 데 사용했지만 제대로 작동하지 않습니다 (삭제 버튼은 콜백에서 관련 구성 요소를 제거 할 수 없음).

<script id='template-download' type='text/x-tmpl'>
      <![CDATA[
          {% for (var i=0, file; file=o.files[i]; i++) { %}
          <tr class="template-download fade">
          {% if (file.error) { %}
          <td></td>
          <td class="name"><span>{%=file.name%}</span></td>
          <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
          <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
          {% } else { %}
          <td class="preview">{% if (file.thumbnail_url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
          {% } %}</td>
          <td class="name">
          <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
          </td>
          <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
          <td colspan="2"></td>
          {% } %}
          <td class="delete">
          <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
          <i class="icon-trash icon-white"></i>
          <span>{%=locale.fileupload.destroy%}</span>
          </button>
          <input type="checkbox" name="delete" value="1">
          </td>
          </tr>
          {% } %}
      ]]>
    </script>
스 니펫 확장

그래서 :plain필터를 사용 합니다.

%script#template-download{:type => "text/x-tmpl"}
  :plain
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
    {% if (file.error) { %}
    <td></td>
    <td class="name"><span>{%=file.name%}</span></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
    {% } else { %}
    <td class="preview">{% if (file.thumbnail_url) { %}
    <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
    {% } %}</td>
    <td class="name">
    <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
    </td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    <td colspan="2"></td>
    {% } %}
    <td class="delete">
    <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
    <i class="icon-trash icon-white"></i>
    <span>{%=locale.fileupload.destroy%}</span>
    </button>
    <input type="checkbox" name="delete" value="1">
    </td>
    </tr>
    {% } %}
스 니펫 확장

변환 된 결과는 원본과 정확히 동일합니다.

그래서이 :plain시나리오의 필터는 제 필요에 맞습니다.

: plain 필터링 된 텍스트를 구문 분석하지 않습니다. 이 기능은로 시작하는 줄을 원하지 않을 때 HTML 태그가없는 큰 텍스트 블록에 유용합니다. 또는-구문 분석됩니다.

자세한 내용은 haml.info 를 참조하십시오.

— 칼 리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.