llamar - ¿Cómo incluyo JavaScript en línea en Haml?

llamar javascript desde html

Question

¿Cómo puedo escribir algo así para incluir en una plantilla, pero en Haml?

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

Answer 1

Así que intenté lo anterior: javascript que funciona :) Sin embargo, HAML ajusta el código generado en CDATA de la siguiente manera:

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

La siguiente HAML generará la etiqueta típica para incluir (por ejemplo) typekit o código de Google Analytics.

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

Answer 2

En realidad, puede hacer lo que hace Chris Chalmers en su respuesta, pero debe asegurarse de que HAML no analiza el JavaScript. Este enfoque es realmente útil cuando necesitas usar un tipo diferente de text/javascript , que era lo que necesitaba hacer para MathJax .

Puede usar el filtro plain para evitar que HAML analice el script y arroje un error de anidamiento ilegal:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["//(","//)"]]
      }
    });

Answer 3

Estoy usando blueimp.github.io/jQuery-File-Upload en haml. El js original está a continuación:

<!-- 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>

Al principio usé :cdata para convertir (de html2haml ), no funciona correctamente (el botón Eliminar no puede eliminar el componente relevante en la devolución de llamada).

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

Entonces yo uso :plain filtro :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>
    {% } %}

El resultado convertido es exactamente el mismo que el original.

Entonces :plain filtro :plain en este senario se ajusta a mi necesidad.

: plain No analiza el texto filtrado. Esto es útil para grandes bloques de texto sin etiquetas HTML, cuando no desea líneas que comiencen. o - para ser analizado.

Para obtener más detalles, consulte http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter

Answer 4

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

Documentos: http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter