I'm using fileupload-jquery in haml. The original js is below:
<!-- The template to display files available for download -->_x000D_
<script id="template-download" type="text/x-tmpl">_x000D_
{% for (var i=0, file; file=o.files[i]; i++) { %}_x000D_
<tr class="template-download fade">_x000D_
{% if (file.error) { %}_x000D_
<td></td>_x000D_
<td class="name"><span>{%=file.name%}</span></td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>_x000D_
{% } else { %}_x000D_
<td class="preview">{% if (file.thumbnail_url) { %}_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>_x000D_
{% } %}</td>_x000D_
<td class="name">_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>_x000D_
</td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td colspan="2"></td>_x000D_
{% } %}_x000D_
<td class="delete">_x000D_
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">_x000D_
<i class="icon-trash icon-white"></i>_x000D_
<span>{%=locale.fileupload.destroy%}</span>_x000D_
</button>_x000D_
<input type="checkbox" name="delete" value="1">_x000D_
</td>_x000D_
</tr>_x000D_
{% } %}_x000D_
</script>At first I used the :cdata to convert (from html2haml), it doesn't work properly (Delete button can't remove relevant component in callback).
<script id='template-download' type='text/x-tmpl'>_x000D_
<![CDATA[_x000D_
{% for (var i=0, file; file=o.files[i]; i++) { %}_x000D_
<tr class="template-download fade">_x000D_
{% if (file.error) { %}_x000D_
<td></td>_x000D_
<td class="name"><span>{%=file.name%}</span></td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>_x000D_
{% } else { %}_x000D_
<td class="preview">{% if (file.thumbnail_url) { %}_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>_x000D_
{% } %}</td>_x000D_
<td class="name">_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>_x000D_
</td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td colspan="2"></td>_x000D_
{% } %}_x000D_
<td class="delete">_x000D_
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">_x000D_
<i class="icon-trash icon-white"></i>_x000D_
<span>{%=locale.fileupload.destroy%}</span>_x000D_
</button>_x000D_
<input type="checkbox" name="delete" value="1">_x000D_
</td>_x000D_
</tr>_x000D_
{% } %}_x000D_
]]>_x000D_
</script>So I use :plain filter:
%script#template-download{:type => "text/x-tmpl"}_x000D_
:plain_x000D_
{% for (var i=0, file; file=o.files[i]; i++) { %}_x000D_
<tr class="template-download fade">_x000D_
{% if (file.error) { %}_x000D_
<td></td>_x000D_
<td class="name"><span>{%=file.name%}</span></td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>_x000D_
{% } else { %}_x000D_
<td class="preview">{% if (file.thumbnail_url) { %}_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>_x000D_
{% } %}</td>_x000D_
<td class="name">_x000D_
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>_x000D_
</td>_x000D_
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>_x000D_
<td colspan="2"></td>_x000D_
{% } %}_x000D_
<td class="delete">_x000D_
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">_x000D_
<i class="icon-trash icon-white"></i>_x000D_
<span>{%=locale.fileupload.destroy%}</span>_x000D_
</button>_x000D_
<input type="checkbox" name="delete" value="1">_x000D_
</td>_x000D_
</tr>_x000D_
{% } %}The converted result is exactly the same as the original.
So :plain filter in this senario fits my need.
:plain Does not parse the filtered text. This is useful for large blocks of text without HTML tags, when you don’t want lines starting with . or - to be parsed.
For more detail, please refer to haml.info