Wie füge ich Inline-JavaScript in Haml ein?

122

Wie kann ich so etwas schreiben, um es in eine Vorlage aufzunehmen, aber in Haml?

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

Antworten:

26

Sie können tatsächlich das tun, was Chris Chalmers in seiner Antwort tut, aber Sie müssen sicherstellen, dass HAML das JavaScript nicht analysiert. Dieser Ansatz ist tatsächlich nützlich, wenn Sie einen anderen Typ als den verwenden müssen text/javascript, für den ich tun musste MathJax.

Sie können den plainFilter verwenden, um zu verhindern, dass HAML das Skript analysiert und einen unzulässigen Verschachtelungsfehler auslöst:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });
Alexander van Oostenrijk
quelle
Der Filter: plain ist sehr nützlich, um das Problem mit Javascript-Vorlagen zu beheben. Vielen Dank! Ich verwende fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ), die viel js Vorlage in haml enthält, und nur: einfacher Filter funktioniert! Für weitere Informationen lesen Sie meine Antwort.
Karl Li
19

Also habe ich das Obige ausprobiert: Javascript, das funktioniert :) HAML verpackt den generierten Code jedoch wie folgt in CDATA:

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

Die folgende HAML generiert das typische Tag zum Einfügen von (zum Beispiel) Typekit- oder Google Analytics-Code. 

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!
Chris Chalmers
quelle
Haml fügte weder CDATAfür mich hinzu, noch arbeitete %scripter für mich, wenn es unregelmäßige Einkerbungen in den js gab.
Agmin
Dies funktioniert nicht, wirft eine illegale Verschachtelung innerhalb der Nur-Text-Ausnahme
Marco Prins
Es funktioniert besser, wenn Sie dem <script> -Tag Attribute hinzufügen müssen, z. id (was in der ursprünglichen Frage ist). Ich verwende haml 4.0.7 –– Sie können den cdata-Wrapper in den haml-Optionen (--cdata) ausschalten, nein, das ist sehr wichtig (glaube ich).
Maciek Rek
2

Ich benutze fileupload-jquery in haml. Das Original js ist unten:

<!-- 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>
Erweitern Sie das Snippet

Zuerst habe ich das :cdatazum Konvertieren verwendet (von html2haml ), es funktioniert nicht richtig (die Schaltfläche Löschen kann relevante Komponenten im Rückruf nicht entfernen).

<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>
Erweitern Sie das Snippet

Also benutze ich :plainFilter:

%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>
    {% } %}
Erweitern Sie das Snippet

Das konvertierte Ergebnis ist genau das gleiche wie das Original.

Der :plainFilter in diesem Szenario entspricht also meinen Anforderungen.

: plain Analysiert den gefilterten Text nicht. Dies ist nützlich für große Textblöcke ohne HTML-Tags, wenn Sie nicht möchten, dass Zeilen mit beginnen. oder - analysiert werden.

Weitere Informationen finden Sie unter haml.info

karl li
quelle