0

在我的应用程序中，我使用下面的代码来提供展开/折叠功能。

在我的 .js 文件之一中：

$(document).ready(function(){

    $('.row .bundle').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        var $collapse = $this.closest('.collapse-group').find('.collapse');
        $collapse.collapse('toggle');
    });

});

在视图中，围绕我想要扩展的任何内容：

<div class="row" style="text-align:center">
 <div class="collapse-group">
    <h4 class="normal_links">
        <a class="bundle" href='#'>(Expand)</a>
    </h4><br>
  <div class="collapse normal_links" >
    # Code to expand/collapse here
  </div>
 </div>
</div>

在我开始使用 morris.js 库向我的应用程序引入一些图表之前，它就像一个魅力一样工作，此时展开/折叠（因此强制 EC）功能停止在每个页面上工作，而不是我的图表显示的页面。当我说 EC 不起作用时，我的意思是当我单击展开链接时，它只是跟随它到 '#'。

我的 morris.js 代码，在图表所属模型的 animal.js.coffee 文件中：

jQuery ->
Morris.Donut
  element: 'weight_chart'
  data: [
    {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
    {label: "Pounds Left", value: $('#weight_chart').data('left')}
  ]
  colors: ['#0066CC', "#880000"]

Morris.Donut
  element: 'sales_chart'
  data: [
    {label: "Revenue Made", value: $('#sales_chart').data('sold')}
    {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
  ]
  colors: ["#336633", "#880000"]

Morris.Donut
    element: 'status_chart'
    data: [
        {label: "Incomplete", value: $('#status_chart').data('zero')}
        {label: "Downpaid", value: $('#status_chart').data('one')}
        {label: "Fully Paid", value: $('#status_chart').data('two')}
        {label: "Received", value: $('#status_chart').data('three')}
    ]
    colors: ["#880000", '#E09050', '#989898', '#000000' ]

我如何在视图中实际调用图表的示例：

 <%= content_tag :div, "", id: "sales_chart", 
       data: {sold: @animal.rev.round(2), 
              left: @animal.rev_left.round(2)}, 
       class: "morris_chart" %>

图表显示完美，与图表页面上的 EC 一样。在似乎每隔一页上，不是。当我使用 morris 代码（暂时）删除 animal.js.coffee 文件时，问题就消失了。我已经三次检查了我的视图代码，一切都很好（或者至少与正在运行的代码相同）。

可能更令人感兴趣的是，当它工作时，那里曾经是一个空的 animal.js 文件，我用带有 morris 相关代码的 animal.js.coffee 文件替换了它。实际的 morris.js 和 raphael.js 代码在 vendor/javascripts 中。EC javascript 代码完全位于另一个模型的 .js 文件中，但到目前为止这还不是问题。

有任何想法吗？我将离开我的电脑几个小时，但是当我回来时，我会发布任何人想要的任何其他代码。

编辑——认为我的 application.js 文件也可能是相关的：

// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require raphael
//= require morris
//= require_tree .
4

2 回答 2

1

问题似乎是 Coffeescript 正在寻找它没有出现的页面上的元素（“sales_chart”等）。发生这种情况时，事情出了问题，我的其他 Javascript 都没有工作。为了解决这个问题，我所要做的就是在调用 Morris 之前检查该元素。所以：

jQuery ->

    if $('#weight_chart').length
      Morris.Donut
        element: 'weight_chart'
        data: [
          {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
          {label: "Pounds Left", value: $('#weight_chart').data('left')}
        ]
        colors: ['#0066CC', "#880000"]

    if $('#sales_chart').length
      Morris.Donut
        element: 'sales_chart'
        data: [
          {label: "Revenue Made", value: $('#sales_chart').data('sold')}
          {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
        ]
        colors: ["#336633", "#880000"]

    if $('#status_chart').length
      Morris.Donut
        element: 'status_chart'
        data: [
          {label: "Incomplete", value: $('#status_chart').data('zero')}
          {label: "Downpaid", value: $('#status_chart').data('one')}
          {label: "Fully Paid", value: $('#status_chart').data('two')}
          {label: "Received", value: $('#status_chart').data('three')}
        ]
        colors: ["#880000", '#E09050', '#989898', '#000000']

问题解决了。感谢您的帮助，以及学习 Coffeescript 的借口！

于 2012-12-11T23:00:51.583 回答
1

尝试将您的 animal.js.coffee 更改为此，它具有正确的缩进，可以将您的 Morris 调用放置在您传递给 jQuery 的函数中。

jQuery ->
  Morris.Donut
    element: 'weight_chart'
    data: [
      {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
      {label: "Pounds Left", value: $('#weight_chart').data('left')}
    ]
    colors: ['#0066CC', "#880000"]

  Morris.Donut
    element: 'sales_chart'
    data: [
      {label: "Revenue Made", value: $('#sales_chart').data('sold')}
      {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
    ]
    colors: ["#336633", "#880000"]

  Morris.Donut
    element: 'status_chart'
    data: [
        {label: "Incomplete", value: $('#status_chart').data('zero')}
        {label: "Downpaid", value: $('#status_chart').data('one')}
        {label: "Fully Paid", value: $('#status_chart').data('two')}
        {label: "Received", value: $('#status_chart').data('three')}
    ]
    colors: ["#880000", '#E09050', '#989898', '#000000' ]
于 2012-12-02T23:50:51.820 回答