如何在Haml中包含内联JavaScript？

122

我如何写这样的东西包括在模板中，但是在Haml中？

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

javascript jquery haml

— 韦戈·德巴西
source

240

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

文件：http : //haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter

— 巴夫兰
source

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）
source

：plain过滤器对于修复javascript模板问题非常有用。谢谢！我正在使用fileupload-jquery（blueimp.github.io/jQuery-File-Upload），其中很多都在haml中包含js模板，只有：plain过滤器有效！有关更多详细信息，请阅读我的答案。

— 卡尔·李

19

所以我尝试了上述：javascript可以工作的:)但是，HAML将生成的代码包装在CDATA中，如下所示：

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

以下HAML将生成用于包括（例如）Typekit或Google Analytics（分析）代码的典型标记。

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

— 克里斯·查默斯
source

如果js中有任何不规则的缩进，那么Haml不会CDATA为我添加%script任何内容，也不会为我工作。

— 2013年

这不起作用，在纯文本示例中引发了非法嵌套

— Marco Prins

如果您需要将属性添加到<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>

展开摘要

最初，我使用进行: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

— 卡尔·李
source