Bagaimana cara memasukkan JavaScript sebaris di Haml?

122

Bagaimana saya bisa menulis sesuatu seperti ini untuk dimasukkan ke dalam template, tapi di Haml?

<script>
$(document).ready( function() {
  $('body').addClass( 'test' );
} );
</script>
javascript jquery haml Fuego DeBassi
sumber

Jawaban:

26

Anda benar-benar dapat melakukan apa yang dilakukan Chris Chalmers dalam jawabannya, tetapi Anda harus memastikan bahwa HAML tidak mengurai JavaScript. Pendekatan ini sebenarnya berguna ketika Anda perlu menggunakan jenis yang berbeda dari text/javascript, yang perlu saya lakukan MathJax.

Anda dapat menggunakan plainfilter untuk mencegah HAML mengurai skrip dan membuat kesalahan bertingkat ilegal:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });
Alexander van Oostenrijk
sumber
Filter: biasa sangat berguna untuk memperbaiki masalah template javascript. Terima kasih! Saya menggunakan fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ), yang banyak menyertakan template js di haml, dan hanya: filter biasa berfungsi! untuk lebih jelasnya baca jawaban saya.
karl li
19

Jadi saya mencoba yang di atas: javascript yang berfungsi :) Namun HAML membungkus kode yang dihasilkan dalam CDATA seperti ini:

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

HAML berikut akan menghasilkan tag tipikal untuk menyertakan (misalnya) typekit atau kode Google Analytics. 

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!
Chris Chalmers
sumber
Haml tidak menambahkan CDATAuntuk saya, juga tidak %scriptbekerja untuk saya jika ada lekukan yang tidak teratur di js.
agmin
Ini tidak berhasil, melempar bersarang ilegal dalam pengecualian teks biasa
Marco Prins
Ini bekerja lebih baik jika Anda perlu menambahkan atribut ke tag <script> misalnya. id (yang ada di pertanyaan awal). Saya menggunakan haml 4.0.7 –– Anda dapat menonaktifkan pembungkus cdata di opsi haml (--cdata) tidak, itu sangat penting (menurut saya).
Maciek Rek
2

Saya menggunakan fileupload-jquery di haml. Js asli ada di bawah ini:

<!-- 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>
Luaskan cuplikan

Pada awalnya saya menggunakan :cdatauntuk mengkonversi (dari html2haml ), itu tidak berfungsi dengan baik (tombol Hapus tidak dapat menghapus komponen yang relevan di callback).

<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>
Luaskan cuplikan

Jadi saya menggunakan :plainfilter:

%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>
    {% } %}
Luaskan cuplikan

Hasil yang dikonversi sama persis dengan aslinya.

Jadi :plainfilter di senario ini sesuai dengan kebutuhan saya.

: polos Tidak mengurai teks yang difilter. Ini berguna untuk blok teks besar tanpa tag HTML, saat Anda tidak ingin baris dimulai. atau - untuk diurai.

Untuk detail lebih lanjut, silakan merujuk ke haml.info

karl li
sumber