如何在 HAML 中包含内联 JavaScript？

在 HTML 中包含 JavaScript 主要有两种方式：

• 内部/内联：通过在“head”或“body”部分使用“script”元素。
• 外部：通过使用外部 JavaScript 文件。

我们将为 HTML 扩展下面的示例，并了解如何以类似方式为 HAML 实现它。要在 HTML 中包含内联 JavaScript，在“head”或“body”部分使用“script”元素，并且该元素在开始和结束标记之间包含 JavaScript 代码。

考虑下面的 HTML 文件示例，我们使用 JavaScript 在“body”部分中使用内联 JavaScript 将新的“p”元素插入到“div”中。

  

    HTML inline JavaScript demo

  

    
        Hi, no script applied yet!
    
  
    
        var tag = document.createElement("p");
        var text = document.createTextNode(
                "Inline JavaScript is applied!");
  
        tag.appendChild(text);
        var element = document.getElementById("container");
        element.appendChild(tag);  
    

  

输出：

在 HAML 中，可以使用:javascript代替“script”标签。请注意缩进，因为 HAML 对缩进敏感。

:javascript
    // JavaScript code goes here with proper indentation

因此，HAML 中相同的初始 HTML 示例变为：

%html 
    %head 
        %title Basic Haml Template
  
    %body
        %div#container
            %p Hi, no script applied yet!
  
        :javascript
            var tag = document.createElement("p");
            var text = document.createTextNode(
            "Inline JavaScript is applied!");
            tag.appendChild(text);
            var element = document.getElementById("container");
            element.appendChild(tag);  

输出：

将内联 JavaScript 包含到 HAML 中的另一种方法是使用%script{type: "text/javascript"}

%script{type: "text/javascript"}
    // JavaScript code goes here with proper indentation

text/javascript不同的类型时，此格式很有用。
HAML 中使用此方法包含内联 JavaScript 的初始示例：

%html 
    %head 
        %title Basic Haml Template
      
    %body
        %div#container
            %p Hi, no script applied yet!
        
        %script{type: "text/javascript"}
            var tag = document.createElement("p");
            var text = document.createTextNode(
            "Inline JavaScript is applied!");
            tag.appendChild(text);
            var element = document.getElementById("container");
            element.appendChild(tag);  

输出：

参考： http://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter