如何在Haml中包含内联JavaScript
How do I include inline JavaScript in Haml?
我如何写这样的东西来包含在模板中,而不是在Haml中?
<script>
$(document).ready( function() {
$('body').addClass( 'test' );
} );
</script>
:javascript
$(document).ready( function() {
$('body').addClass( 'test' );
} );
文档:http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-过滤器
您实际上可以按照Chris Chalmers的回答进行操作,但必须确保HAML不会解析JavaScript。当您需要使用与text/javascript
不同的类型时,这种方法实际上很有用,这正是我为MathJax
所需要做的。
您可以使用plain
过滤器来防止HAML解析脚本并引发非法嵌套错误:
%script{type: "text/x-mathjax-config"}
:plain
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["''(","'')"]]
}
});
所以我尝试了上面的:有效的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中使用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),但它无法正常工作(Delete按钮无法在回调中删除相关组件)。
<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
相关文章:
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 从我自己的脚本中包含的Javascript文件中调用一个函数
- 在JavaFX的String中包含本地javascript源
- 在脚本标记中包含一个javascript文件
- 使用多功能框在 chrome 扩展程序中包含内联自动填充功能的任何方法
- 如何在 Angular 2 中包含外部 JavaScript 库
- 如何在没有冲突的情况下将 JQuery 包含在 JavaScript 文件中
- 如果 URL 包含使用 JavaScript 重定向的特定端口
- YepNope/Modernizr 回调,包含全局 JavaScript 变量和 Internet Explorer
- 如何查找不同页面上是否确实需要包含的JavaScript文件
- 我们如何捕捉主文件中包含的javascript文件引发的错误
- 包含的javascript源代码通过PHP,onmousemove事件,函数未定义
- 将jQuery包含到javascript中,并在imacros中使用它
- 设置一个复选框,其中包含使用javaScript检查的特定名称和id
- 删除HTML脚本标记会对它所包含的JavaScript产生任何影响吗
- 如何在PHP中包含动态Javascript页面的静态HTML结果
- 如何在 BIRT 脚本数据源中包含外部 Javascript
- 如何将OpenCV包含在JavaScript项目中
- 如何在 reactjs 中包含外部 JavaScript 库
- 如何在Haml中包含内联JavaScript