Làm thế nào tôi có thể viết một cái gì đó như thế này để đưa vào một mẫu, nhưng trong Haml?
<script>
$(document).ready( function() {
$('body').addClass( 'test' );
} );
</script>Làm thế nào tôi có thể viết một cái gì đó như thế này để đưa vào một mẫu, nhưng trong Haml?
<script>
$(document).ready( function() {
$('body').addClass( 'test' );
} );
</script>Câu trả lời:
:javascript
$(document).ready( function() {
$('body').addClass( 'test' );
} );Tài liệu: http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter
Bạn thực sự có thể làm những gì Chris Chalmers làm trong câu trả lời của anh ấy, nhưng bạn phải đảm bảo rằng HAML không phân tích cú pháp JavaScript. Cách tiếp cận này thực sự hữu ích khi bạn cần sử dụng một loại khác với text/javascript, đó là điều tôi cần làm MathJax.
Bạn có thể sử dụng plainbộ lọc để ngăn HAML phân tích tập lệnh và tạo ra lỗi lồng bất hợp pháp:
%script{type: "text/x-mathjax-config"}
:plain
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]]
}
});Vì vậy, tôi đã thử ở trên: javascript hoạt động :) Tuy nhiên HAML bao bọc mã được tạo trong CDATA như vậy:
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {
$('body').addClass( 'test' );
} );
//]]>
</script>HAML sau đây sẽ tạo thẻ điển hình để bao gồm (ví dụ) bộ gõ hoặc mã phân tích google.
%script{:type=>"text/javascript"}
//your code goes here - dont forget the indent!CDATAcho tôi, cũng không làm %scriptviệc cho tôi nếu có bất kỳ vết lõm bất thường nào trong js.
Tôi đang sử dụng fileupload-jquery trong haml. Bản gốc js bên dưới:
<!-- 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>Lúc đầu, tôi sử dụng :cdatađể chuyển đổi (từ html2haml ), nó không hoạt động bình thường (nút Xóa không thể xóa thành phần liên quan trong cuộc gọi lại).
<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>Vì vậy, tôi sử dụng :plainbộ lọc:
%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>
{% } %}Kết quả được chuyển đổi hoàn toàn giống với kết quả ban đầu.
Vì vậy, :plainbộ lọc trong senario này phù hợp với nhu cầu của tôi.
: trơn Không phân tích cú pháp văn bản đã lọc. Điều này hữu ích cho các khối văn bản lớn không có thẻ HTML, khi bạn không muốn các dòng bắt đầu bằng. hoặc - được phân tích cú pháp.
Để biết thêm chi tiết, vui lòng tham khảo tại haml.info