如何在 Haml 中包含内联 JavaScript？

Posted 2023-02-24

【中文标题】如何在 Haml 中包含内联 JavaScript？

【英文标题】：How do I include inline JavaScript in Haml?

【发布时间】：2012-04-02 09:41:10

【问题描述】：

如何编写这样的内容以包含在模板中，但在 Haml 中？

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

【参考方案1】：

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

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

【参考方案2】：

您实际上可以执行 Chris Chalmers 在他的回答中所做的事情，但您必须确保 HAML 不会解析 JavaScript。当您需要使用与text/javascript 不同的类型时，这种方法实际上很有用，这是我需要为MathJax 做的。

您可以使用plain 过滤器来阻止 HAML 解析脚本并引发非法嵌套错误：

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

【讨论】：

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

【参考方案3】：

所以我尝试了上面的 :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，如果 js 中有任何不规则的缩进，%script 也没有为我工作。

这不起作用，会在纯文本异常中引发非法嵌套

如果您需要向

【参考方案4】：

我在 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