将html转换为haml

上面有一个projects.html文件。该文件成功运行，但是当我将这个html文件转换为带有http://html2haml.heroku.com/的haml文件时，haml文件不起作用。将html转换为haml

你能看到两个文件之间的区别吗？

projects.html.erb

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Sectoral Statistics' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage}% - {point.y} proje</b> ', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' % - '+ this.y +' proje'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        <% @results.each do |key,value| %>  
         ['<%= key %>',<%= value %>,<%= value %>], 
        <% end %> 
        ] 
      }] 
     }); 
    }); 

}); 
</script>

projects.html.haml

%script{:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", :type => "text/javascript"} 
%script{:src => "http://code.highcharts.com/highcharts.js"} 
%script{:src => "http://code.highcharts.com/modules/exporting.js"} 
:javascript 
    $(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Sectoral Statistics' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: {point.percentage}% - {point.y} proje ', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return ''+ this.point.name +': '+ Math.round(this.percentage) +' % - '+ this.y +' proje'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        @results.each do |key,value|  
         [' key ', value , value ], 
        ] 
      }] 
     }); 
    }); 

});

来源

2013-02-02 Johnny Cash

在我看来，更像是顶部带有HTML标签的Javascript。你打算在Rails项目中使用它吗？ –

是的，它实际上是关于与JavaScript的JavaScript，但我会在rails项目中使用 –

我建议将您的js从视图模板移动到分离的文件中，并将这些文件包含在manifest文件'application.js'中。在你的情况下，HTML2HAML无法正确转换。你可以在[RailsGuide]（http://guides.rubyonrails.org/asset_pipeline.html）中搜索'asset-pipeline'，你会发现Rails的方式来组织你的'js'和'css'。 –

我认为这是html2haml的错误。

在你的HTML，你最后script标签看起来是这样的（我剪了下来简洁）：

<script type="text/javascript"> 
    $(function() { 
    ... 
}); 
</script>

第一行缩进，但最后还不是。 html2haml仅看第一行确定如何缩进的JavaScript时，这是导致Haml的，看起来像：

:javascript 
    $(function() { 
    ... 
});

最后一行 - }); - 是不是缩进。

要解决该问题，您应该修复缩进，无论是HTML还是生成的Haml。

请注意，有another bug与:javascript过滤器，你应该知道。它认为在这种情况下，你应该完全适合那个。

来源

2013-02-02 15:37:12 matt

将html转换为haml

回答

相关问题