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

122

¿Cómo puedo escribir algo como esto para incluirlo en una plantilla, pero en Haml?

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

javascript jquery haml

— Fuego DeBassi
fuente

240

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

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

— bcoughlan
fuente

26

De hecho, puede hacer lo que hace Chris Chalmers en su respuesta, pero debe asegurarse de que HAML no analice JavaScript. Este enfoque es realmente útil cuando necesita usar un tipo diferente al text/javascriptque tenía que hacer MathJax.

Puede usar el plainfiltro para evitar que HAML analice el script y arroje un error de anidación ilegal:

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

— Alexander van Oostenrijk
fuente

El filtro: plain es muy útil para solucionar el problema de la plantilla de JavaScript. ¡Gracias! Estoy usando fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ), que incluye la plantilla js en haml, y solo: ¡el filtro simple funciona! para más detalles, lea mi respuesta.

— karl li

19

Así que probé lo anterior: javascript que funciona :) Sin embargo, HAML envuelve el código generado en CDATA así:

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

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

— Chris Chalmers
fuente

Haml no agregó CDATApor mí, ni %scriptfuncionó para mí si había alguna sangría irregular en las js.

— agmin

Esto no funciona, arroja un anidamiento ilegal dentro de la excepción de texto sin formato

— Marco Prins

Funciona mejor si necesita agregar atributos a la etiqueta <script>, por ejemplo. id (que está en cuestión original). Estoy usando haml 4.0.7 –– puedes desactivar el contenedor cdata en las opciones de haml (--cdata) no, eso es muy importante (creo).

— Maciek Rek

2

Estoy usando fileupload-jquery 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>

Expandir fragmento

Al principio utilicé el :cdatapara 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>

Expandir fragmento

Entonces uso el :plainfiltro:

%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>
    {% } %}

Expandir fragmento

El resultado convertido es exactamente el mismo que el original.

Así que el :plainfiltro en este senario se adapta a mis necesidades.

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

Para obtener más detalles, consulte haml.info

— karl li
fuente