Rails 使用 coffeescript 动态更新 morris.js 数据

Question

在我的 Rails 应用程序中，我有一个 morris.js 折线图，它在初始页面加载时工作得很好。我现在想要完成的是在更新 table 中的某些 best_in_place 字段时动态更新此图表（通过 ajax:success）。

更新 morris.js 图表需要传入一个新的哈希数组，例如（在我的例子中）：[{"month":"2014-05","cashposition":3},{"month":"2014-06","cashposition":1}]。我的 model_method cash_position 创建这个很好。

问题来了。在 CoffeeScript 的 ajax:success 函数中，我很难从我的模型方法 cash_position 访问哈希数组。说这个哈希数组没有正确转换为 json 可能更正确。

我已经设置了一个控制器路由 /cash_position 来将哈希数组呈现为 json 但是 json 呈现如下：

[{"month"=>"2015-04", "cashposition"=>11}

这提供了一个对象而不是所需的哈希数组，因此图表将忽略它。

如何以散列数组的形式访问该方法的结果？仅供参考，我已经通过在下面 .data() 中手动输入哈希数组成功地更新了图表，所以我相信唯一的问题只是访问这个哈希数组以及它如何转换为 [=68] =].

static_pages.coffee

$('.update-percent').on 'ajax:success', (event, data, status, xhr) ->
    data = $.ajax({url: "/payment_schedules/cash_position.json"})
    console.log(data)
    window.lineChart.setData(data)

console.log 在 data

上输出

responseText 显示具有上述不正确 json 输出的单个对象，而不是散列数组。

更新了控制器代码

控制器

...
def cash_position
    @payment_schedule = PaymentSchedule.find(params[:id])
end

更新为 cash_position.json.erb 查看模板

`<%= @payment_schedule.cash_position %>`

Answer 1

您不需要/不需要用于渲染的视图 JSON。基本上 JSON 视图很慢，因为你正在连接字符串，而不是转换 Ruby 在高度优化的 C 代码中完成的对象。

只需使用render json:

def cash_position
    @payment_schedules = PaymentSchedule.find
    respond_to do |f|
      f.json { render json: @payment_schedule.cash_position }
    end
end

对于更复杂的需求，您可能需要使用很棒的 gem active_model_serializers，它也非常容易测试。

你的 ajax 处理程序也有点不对劲（对不起，我在 CS 上很垃圾）。

$('.update-percent').on('ajax:success', function(event, data, status, xhr){
   // data in this scope is whatever the previous ajax call returned.
   // masking the variable is bound to lead to confusion.

   var promise = $.ajax({
      url: "/payment_schedules/cash_position.json",
      dataType: 'json'
   });
   promise.done(function(cash_positions){
     // this is just an example of how you can use callback chaining
     // to process the data.
     return $.map(cash_positions, function(cp){
     });
   });
   promise.done(function(continuation){
     window.lineChart.setData(continuation);
   });
});

如果您使用上述模式，您可以避免 API 被图形具有的任何数据结构要求污染。

Answer 2

@papirtiger 关于控制器代码是正确的，但我们最终使用 JQuery 的 deferred.then() 方法来使其工作：

coffeescript $.ajax( url: '/payment_schedules/cash_position.json' dataType: 'json' ).then (data) -> window.lineChart.setData(data)

Rails 使用 coffeescript 动态更新 morris.js 数据

Rails updating morris.js data dynamically with coffeescript

ajax

json

ruby-on-rails

coffeescript

morris.js