インラインJavaScriptをHamlに含めるにはどうすればよいですか?


122

このようなものをテンプレートに含めるためにどのように書くことができますか?

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

回答:



26

実際にChris Chalmersが彼の答えで行うことを実行できますが、HAMLがJavaScriptを解析しないことを確認する必要があります。このアプローチはtext/javascript、とは異なるタイプを使用する必要がある場合に実際に役立ちますMathJax

plainフィルターを使用して、HAMLがスクリプトを解析し、不正なネストエラーをスローしないようにすることができます。

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

:plainフィルターは、JavaScriptテンプレートの問題を修正するのに非常に役立ちます。ありがとう!私はfileupload-jquery(blueimp.github.io/jQuery-File-Upload)を使用していますが、これにはhamlにjsテンプレートが含まれており、:plainフィルターのみが機能します!詳細については、私の答えを読んでください。
karl li

19

だから私は上記の:javascriptを試してみました:)しかし、HAMLは生成されたコードをCDATAにラップします:

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

次のHAMLは、(たとえば)タイプキットまたはGoogleアナリティクスコードを含めるための一般的なタグを生成します。

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

HamlはCDATA私に追加しませんでした%scriptし、jsに不規則なインデントがあったとしても私のために働きませんでした。
agmin 2013年

これは機能せず、プレーンテキストの例外内に不正な入れ子をスローします
Marco Prins

たとえば、<script>タグに属性を追加する必要がある場合は、より適切に機能します。id(元の質問にあります)。私はhaml 4.0.7を使用しています。–重要ではないにせよ、hamlオプション(--cdata)でcdataラッパーをオフに切り替えることができます(私はそう思います)。
Maciek Rek 2017

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>

最初にを使用し: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、このシナリオでのフィルターは私のニーズに適合します。

:plainフィルタリングされたテキストを解析しません。これは、で始まる行が不要な場合に、HTMLタグのない大きなテキストブロックに役立ちます。または-解析されます。

詳細については、haml.infoを参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.