Comment puis-je inclure du JavaScript en ligne dans Haml?

122

Comment puis-je écrire quelque chose comme ça à inclure dans un modèle, mais dans Haml?

<script>
$(document).ready( function() {
  $('body').addClass( 'test' );
} );
</script>
javascript jquery haml Fuego DeBassi
la source

Réponses:

26

Vous pouvez réellement faire ce que fait Chris Chalmers dans sa réponse, mais vous devez vous assurer que HAML n'analyse pas le JavaScript. Cette approche est en fait utile lorsque vous devez utiliser un type différent de celui pour text/javascriptlequel je devais le faire MathJax.

Vous pouvez utiliser le plainfiltre pour empêcher HAML d'analyser le script et de générer une erreur d'imbrication illégale:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });
Alexander van Oostenrijk
la source
Le filtre: plain est très utile pour résoudre le problème du modèle javascript. Merci! J'utilise fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ), qui inclut beaucoup le modèle js dans haml, et seulement: le filtre simple fonctionne! pour plus de détails, lisez ma réponse.
karl li
19

J'ai donc essayé ce qui précède: javascript qui fonctionne :) Cependant, HAML enveloppe le code généré dans CDATA comme suit:

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

Le HAML suivant générera la balise typique pour inclure (par exemple) typekit ou code google analytics. 

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!
Chris Chalmers
la source
Haml n'a pas ajouté CDATApour moi, ni n'a %scripttravaillé pour moi s'il y avait des indentations irrégulières dans les js.
jeudi
Cela ne fonctionne pas, jette une imbrication illégale dans l'exeption de texte brut
Marco Prins
Cela fonctionne mieux si vous devez ajouter des attributs à la balise <script>, par exemple. id (qui est en question d'origine). J'utilise haml 4.0.7 –– vous pouvez désactiver le wrapper cdata dans les options haml (--cdata) non que cela compte beaucoup (je pense).
Maciek Rek le
2

J'utilise fileupload-jquery dans haml. Le js original est ci-dessous:

<!-- 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>
Développer l'extrait

Au début, j'ai utilisé le :cdatapour convertir (à partir de html2haml ), cela ne fonctionne pas correctement (le bouton Supprimer ne peut pas supprimer le composant pertinent dans le rappel).

<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>
Développer l'extrait

J'utilise donc le :plainfiltre:

%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>
    {% } %}
Développer l'extrait

Le résultat converti est exactement le même que l'original.

Donc, le :plainfiltre dans ce senario correspond à mon besoin.

: plain N'analyse pas le texte filtré. Ceci est utile pour les grands blocs de texte sans balises HTML, lorsque vous ne voulez pas de lignes commençant par. ou - à analyser.

Pour plus de détails, veuillez vous référer à haml.info

Karl Li
la source