ฉันจะรวม JavaScript แบบอินไลน์ใน Haml ได้อย่างไร

122

ฉันจะเขียนอะไรแบบนี้เพื่อรวมไว้ในเทมเพลต แต่ใน Haml ได้อย่างไร

<script>
$(document).ready( function() {
  $('body').addClass( 'test' );
} );
</script>

javascript jquery haml

— Fuego DeBassi
แหล่งที่มา

240

:javascript
    $(document).ready( function() {
      $('body').addClass( 'test' );
    } );

เอกสาร: http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter

— bcoughlan
แหล่งที่มา

26

คุณสามารถทำสิ่งที่ Chris Chalmers ทำในคำตอบของเขาได้ แต่คุณต้องแน่ใจว่า HAML ไม่แยกวิเคราะห์ JavaScript วิธีการนี้จะเป็นประโยชน์จริงเมื่อคุณจำเป็นต้องใช้ชนิดที่แตกต่างกันมากกว่าซึ่งจะเป็นที่ผมต้องทำสำหรับtext/javascriptMathJax

คุณสามารถใช้plainตัวกรองเพื่อป้องกันไม่ให้ HAML แยกวิเคราะห์สคริปต์และทำให้เกิดข้อผิดพลาดในการซ้อนที่ผิดกฎหมาย:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });

— Alexander van Oostenrijk
แหล่งที่มา

ตัวกรองธรรมดามีประโยชน์มากในการแก้ไขปัญหาเทมเพลตจาวาสคริปต์ ขอบคุณ! ฉันใช้ fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ) ซึ่งมีเทมเพลต js อยู่ใน haml และมีเพียงตัวกรองธรรมดาเท่านั้นที่ใช้งานได้! สำหรับรายละเอียดเพิ่มเติมโปรดอ่านคำตอบของฉัน

— karl li

19

ดังนั้นฉันจึงลองข้างต้น: javascript ซึ่งใช้งานได้ :) อย่างไรก็ตาม HAML ห่อรหัสที่สร้างขึ้นใน CDATA ดังนี้:

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

HAML ต่อไปนี้จะสร้างแท็กทั่วไปสำหรับรวม (เช่น) typekit หรือ google analytics code

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!

— Chris Chalmers
แหล่งที่มา

Haml ไม่ได้เพิ่มCDATAให้ฉันและไม่ได้%scriptทำงานให้ฉันหากมีการเยื้องที่ผิดปกติใน js

— agmin

วิธีนี้ใช้ไม่ได้ผลโยนการซ้อนที่ผิดกฎหมายภายในการกำจัดข้อความธรรมดา

— Marco Prins

จะทำงานได้ดีขึ้นหากคุณต้องการเพิ่มแอตทริบิวต์ให้กับแท็ก <script> เช่น id (ซึ่งอยู่ในคำถามเดิม) ฉันใช้ haml 4.0.7 - คุณสามารถปิด cdata wrapper ในตัวเลือก haml (--cdata) ไม่ว่ามันจะสำคัญมาก (ฉันคิดว่า)

— Maciek Rek

2

ฉันใช้fileupload-jqueryใน haml 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>

ขยายข้อมูลโค้ด

ตอนแรกฉันใช้การ:cdataแปลง (จากhtml2haml ) มันทำงานไม่ถูกต้อง (ปุ่มลบไม่สามารถลบองค์ประกอบที่เกี่ยวข้องในการโทรกลับ)

<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ตัวกรองใน Senario นี้จึงเหมาะกับความต้องการของฉัน

: plain ไม่แยกวิเคราะห์ข้อความที่กรอง สิ่งนี้มีประโยชน์สำหรับข้อความขนาดใหญ่ที่ไม่มีแท็ก HTML เมื่อคุณไม่ต้องการให้บรรทัดขึ้นต้นด้วย หรือ - เพื่อแยกวิเคราะห์

สำหรับรายละเอียดเพิ่มเติมโปรดดูที่haml.info

— คาร์ลลี่
แหล่งที่มา