为什么在我的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？）？

回答

相关问题