Как включить встроенный JavaScript в Haml?

Как я могу написать что-то подобное для включения в шаблон, но в Haml?

<script>
$(document).ready( function() {
  $('body').addClass( 'test' );
} );
</script>
108 голосов | спросил Fuego DeBassi 17 MaramSat, 17 Mar 2012 00:35:10 +04002012-03-17T00:35:10+04:0012 2012, 00:35:10

4 ответа


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

Документы: http://haml.info/docs/yardoc/file.REFERENCE.html # Javascript-фильтр

ответил bcoughlan 17 MaramSat, 17 Mar 2012 00:37:44 +04002012-03-17T00:37:44+04:0012 2012, 00:37:44
0

На самом деле вы можете делать то, что Крис Чалмерс делает в своем ответе, но вы должны убедиться, что HAML не анализирует JavaScript. Этот подход на самом деле полезен, когда вам нужно использовать тип, отличный от text/javascript, что мне и нужно было сделать для MathJax.

Вы можете использовать фильтр plain, чтобы HAML не анализировал скрипт и не выдавал ошибку недопустимого вложения:

%script{type: "text/x-mathjax-config"}
  :plain
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [["$","$"],["\\(","\\)"]]
      }
    });
ответил Alexander van Oostenrijk 18 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 18 Sep 2014 11:40:49 +0400 2014, 11:40:49
0

Итак, я попробовал выше: javascript, который работает :) Однако HAML оборачивает сгенерированный код в CDATA следующим образом:

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

Следующий HAML сгенерирует типичный тег для включения (например) typekit или кода Google Analytics.

 %script{:type=>"text/javascript"}
  //your code goes here - dont forget the indent!
ответил Chris Chalmers 15 Maypm13 2013, 22:25:34
0

Я использую fileupload-jquery в haml. Оригинал js ниже:

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

Сначала я использовал для преобразования :cdata (из html2haml ), он не работает должным образом (кнопка Удалить не может удалить соответствующий компонент в обратном вызове).

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

Поэтому я использую фильтр :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>
    {% } %}

Конвертированный результат в точности совпадает с оригиналом.

Итак, фильтр :plain в этом сенарио соответствует моим требованиям.

  

: plain Не анализирует отфильтрованный текст. Это полезно для больших блоков текста без HTML-тегов, когда вам не нужны строки, начинающиеся с. или - для анализа.

Для получения более подробной информации, пожалуйста, обратитесь к haml.info

ответил karl li 16 MaramThu, 16 Mar 2017 02:13:33 +03002017-03-16T02:13:33+03:0002 2017, 02:13:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132