爲什麼在我的charts.js.erb文件中顯示爲'（HTML Entity？）？

我正在嘗試在Morris.js中創建一個簡單的條形圖，它將顯示一個人的工作量，並與他們的名字配對。（名稱，工作量）|鍵，值|爲什麼在我的charts.js.erb文件中顯示爲'（HTML Entity？）？

爲此，我創建了用戶名和他們的工作量@workloads的散列。然後，在我的charts.js.erb文件中：

$(document).ready(function() { 
    Morris.Bar({ 
     element: 'workload-bar-chart', 
     data: [ 
     <% @workloads.each do |key, value| %> 
     <%= "{ y: '#{key}', a: #{value} }," %> 
     <% end %> 
     ], 
     xkey: 'y', 
     ykeys: ['a'], 
     labels: ['Name'], 
     hideHover: 'auto', 
     resize: true 
    }); 
});

這是在瀏覽器中呈現的輸出。（Safari瀏覽器，如果你問。）

$(document).ready(function() { 
     Morris.Bar({ 
      element: 'workload-bar-chart', 
      data: [ 
      { y: &#39;Ronny&#39;, a: 0 }, 
      { y: &#39;Jeff&#39;, a: 24 }, 
      { y: &#39;Brad&#39;, a: 41 }, 
      { y: &#39;Janice&#39;, a: 2 }, 
      { y: &#39;Jose&#39;, a: 4 }, 
      ], 
      xkey: 'y', 
      ykeys: ['a'], 
      labels: ['Name'], 
      hideHover: 'auto', 
      resize: true 
     }); 
    });

現在，這並不在所有的Morris.js工作。我想獲得的輸出是這樣的：

$(document).ready(function() { 
     Morris.Bar({ 
      element: 'workload-bar-chart', 
      data: [ 
      { y: 'Ronny', a: 0 }, 
      { y: 'Jeff', a: 24 }, 
      { y: 'Brad', a: 41 }, 
      { y: 'Janice', a: 2 }, 
      { y: 'Jose', a: 4 }, 
      ], 
      xkey: 'y', 
      ykeys: ['a'], 
      labels: ['Name'], 
      hideHover: 'auto', 
      resize: true 
     }); 
    });

當我在手工編碼本，它完美的作品，我覺得沒有什麼是錯的哈希本身。（它在視圖中打印得很好。）我只需要阻止我的'轉換爲'，我相信這意味着我需要以某種方式逃避它。我認爲它會將我的'轉換爲HTML實體（十進制）。

僅供參考，我對JavaScript幾乎一無所知，而且我只用Ruby on Rails編寫了一年多的代碼。

來源

2014-09-26 Aaron

在一個側面說明，通過ERB傾銷數據到JavaScript是抗圖案。通常用Ajax加載它通常會更好。 – max 2014-09-26 20:46:58

最簡單的答案是使用escape_javascript。但你最可能應該做的是使用AJAX並使用你自己的API。

爲什麼？

因爲您可以在Jasmine/Mocha等中測試javascript，而無需設置整個導軌堆棧。您也可以在測試中簡單地存儲ajax調用。
通過避免「動態」JavaScript，您可以在部署時編譯所有資產。

$(document).ready(function() { 

    // I just assumed this path 
    var promise = $.getJSON('/workloads.json'); 

    // Transform data 
    promise.then(function(data){ 
     return $.map(data, function(item){ 
      return { 
       y: item.name, 
       a: item.foo 
      } 
     }); 
    }); 
    // Render chart 
    promise.done(function(data){ 
     Morris.Bar({ 
      element: 'workload-bar-chart', 
      data: data, 
      xkey: 'y', 
      ykeys: ['a'], 
      labels: ['Name'], 
      hideHover: 'auto', 
      resize: true 
     }); 
    }); 
});

來源

2014-09-26 21:11:20 max

雖然escape_javascript確實可行，但這顯然是正確的方法。 – Aaron 2014-09-27 13:33:07

我注意到現在你可以在Morris中設置'xkey'和'ykey'，這樣你就可以跳過整個變換數據步驟。 – max 2014-09-27 17:08:32

是的，我只是嘗試在morris中設置xkey和ykey，它完美地工作。感謝您回覆，指出這一點。 – Aaron 2014-09-29 15:00:51

嘗試escape_javascript在你看來

<% @workloads.each do |key, value| %> 
    <%=j "{ y: '#{key}', a: #{value} }," %> # j is an alias for escape_javascript 
    <% end %>

來源

2014-09-26 20:32:31

爲什麼在我的charts.js.erb文件中顯示爲'（HTML Entity？）？

回答

相關問題