हमल में जावास्क्रिप्ट को इनलाइन कैसे शामिल करें?

Question

टेम्पलेट में शामिल करने के लिए मैं इस तरह से कुछ कैसे लिख सकता हूं, लेकिन हम्ल में?

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

Answer 1

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

डॉक्स: http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-fterter

Answer 2

आप वास्तव में क्रिस चालर्स अपने जवाब में क्या कर सकते हैं, लेकिन आपको यह सुनिश्चित करना होगा कि एचएएमएल जावास्क्रिप्ट को पार्स नहीं करता है। यह दृष्टिकोण वास्तव में उपयोगी है जब आपको किसी अन्य प्रकार की तुलना में उपयोग करने की आवश्यकता होती है text/javascript, जो कि मुझे करने की आवश्यकता थी MathJax।

आप plainएचएएमएल को स्क्रिप्ट को पार्स करने और अवैध घोंसले के शिकार को फेंकने के लिए फ़िल्टर का उपयोग कर सकते हैं :

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

Comments

जावास्क्रिप्ट टेम्पलेट समस्या को ठीक करने के लिए सादा फिल्टर बहुत उपयोगी है। धन्यवाद! मैं fileupload-jquery ( blueimp.github.io/jQuery-File-Upload ) का उपयोग कर रहा हूं , जिसमें haml में js टेम्प्लेट शामिल है, और केवल: सादा फिल्टर काम करता है! अधिक विस्तार के लिए, मेरा उत्तर पढ़ें।

— कर्ल ली

Answer 3

तो मैंने उपरोक्त कोशिश की: जावास्क्रिप्ट जो काम करता है :) हालांकि HAML सीडीएटीए में उत्पन्न कोड को लपेटता है जैसे:

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

निम्न HAML इसमें (उदाहरण के लिए) टाइपटेकिट या गूगल एनालिटिक्स कोड शामिल करने के लिए विशिष्ट टैग उत्पन्न करेगा।

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

Comments

हमल ने CDATAमेरे लिए कुछ नहीं जोड़ा , और न ही %scriptमेरे लिए काम किया, अगर js में कोई अनियमित मांग थी।

— अग्रीम

यह काम नहीं करता है, सादे पाठ छूट के भीतर एक अवैध घोंसले का शिकार करता है

— मार्को

यदि आप <script> टैग उदा में विशेषताएँ जोड़ना चाहते हैं तो यह बेहतर काम करता है। आईडी (जो मूल प्रश्न में है)। मैं 4.0 मिलीलीटर का उपयोग कर रहा हूं- आप हैडल ऑप्शंस (- LCData) में cdata आवरण को स्विच-ऑफ कर सकते हैं, यह बहुत ज्यादा मायने रखता है (मुझे लगता है)।

— मैकिक री

Answer 4

मैं fileupload-jquery का उपयोग कर रहा हूँ । मूल 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इस सेनेरियो में फ़िल्टर मेरी जरूरत को पूरा करता है।

: सादा फ़िल्टर किए गए पाठ को पार्स नहीं करता है। यह HTML टैग के बिना पाठ के बड़े ब्लॉक के लिए उपयोगी है, जब आप लाइनों को शुरू नहीं करना चाहते हैं। या - पार्स किया जाना।

अधिक विस्तार के लिए, कृपया देखें haml.info