为什么 '' 在我的 charts.js.erb 文件中显示为 '（HTML 实体？）？答案

【问题标题】：Why do '' show up as ' (HTML Entity?) in my charts.js.erb file?为什么 '' 在我的 charts.js.erb 文件中显示为 '（HTML 实体？）？
【发布时间】：2014-09-26 20:25:56
【问题描述】：

我正在尝试在 Morris.js 中创建一个简单的条形图，它将显示一个人的工作量以及他们的姓名。（名称、工作负载）|键、值|

为此，我创建了一个用户名和他们的工作负载的哈希，@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
      });
    });

当我手动编写代码时，它可以完美运行，而且我认为散列本身没有任何问题。（它在视图中打印得很好。）我只需要阻止我的' 转换为&#39;，我相信这意味着我需要以某种方式逃避它。我认为它正在将我的 ' 转换为 HTML 实体（十进制）。

仅供参考，我对 javascript 几乎一无所知，而且我使用 Ruby on Rails 编码才一年多。

【问题讨论】：

附带说明，通过 ERB 将数据转储到 javascript 是一种反模式。通常最好用 ajax 加载它。

标签： javascript ruby-on-rails ruby erb morris.js

【解决方案1】：

简单的答案是使用escape_javascript。但是您最应该做的是使用 AJAX 并使用您自己的 API。

为什么？

因为您可以在 Jasmine/Mocha 等中测试 javascript，而无需设置整个 Rails 堆栈。您还可以在测试中简单地存根 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
        });
    });
});

【讨论】：

虽然 escape_javascript 确实可以工作，但这显然是正确的方法。
我现在注意到您可以在 Morris 中设置 xkey 和 ykey，这样您就可以跳过整个转换数据步骤。
是的，我刚刚尝试在 morris 中设置 xkey 和 ykey 并且效果很好。感谢您回来指出这一点。

【解决方案2】：

在您的视图中尝试escape_javascript

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

【讨论】：