JSをRAILSにレンダリングしようとすると問題が発生する

Question

現在、私のRAILSアプリケーションでグラフを作成するためにHighchartsを実装しています。私はそれをもっときれいにするために怠け者のハイチャートの宝石を使用しています。これは正常に動作します。グラフは素晴らしいです。残念ながら、クリックイベントのようなカスタムjsイベントの追加など、いくつかのことが宝石でサポートされていませんでした。ビューに追加のオプションコードを追加する必要があります。

以下の関連するコードを見ることができます。コメントアウトされたクリックイベントは正常に動作します。このクリックイベントはブラウザのアラートウィンドウを正常に表示します。下のjsテキストの大きなブロックは、実装したいより高度なクリックイベントです。残念ながら、私は以下のエラーを受け取ります。 RAILSがjsテキストを解析しようとしているので、私はそれを推測していますか？私はそれを解決することはできません。

<%= high_chart("my_id", @h) do |c| %> 
    <%= #"options.series[4].point.events.click = function() {alert ('Category: ');}" %> 
    <%= render :js => %{ 
      options.series[4].point.events.click = 
       function() { 
         hs.htmlExpand(null, { 
          pageOrigin: { 
           x: this.pageX, 
           y: this.pageY 
          }, 
          headingText: this.series.name, 
          maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' visits', 
          width: 200 
         }); 
        } 
       } %> 
<% end %> 

エラー：

/home/scott/flux/app/views/cognos_mn_tickets/pbadata.html.erb:22: syntax error, unexpected ',', expecting ')' 
...ext: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/>... 
...        ^
/home/scott/flux/app/views/cognos_mn_tickets/pbadata.html.erb:22: unknown type of %string 
... Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+t... 
... 

Answer 1

問題は、あなたが%{で文字列を起動したとき、それはあなたのJavaScriptコードの途中にある-which非常に次の}に終了しますということです。代わりにHeredocという構文を使用してみてください。

<%= high_chart("my_id", @h) do |c| %> 
    <%= <<-END 
     options.series[4].point.events.click = function() { 
     hs.htmlExpand(null, { 
      pageOrigin  : { x: this.pageX, y: this.pageY }, 
      headingText  : this.series.name, 
      maincontentText : Highcharts.dateFormat('%A, %b %e, %Y', this.x) + 
          ':<br/> ' + this.y + ' visits', 
      width   : 200 
     }); 
     } 
    END 
    %> 
<% end %>