Question

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

在我的一个.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 .

Answer 1

尝试将你的animal.js.coffee更改为this，它具有正确的缩进，可以将你的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' ]

Answer 2

问题似乎是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的借口！

新的Coffeescript文件干扰了其他JS

2 个答案: