新的 Coffeescript 文件干扰其他 JS答案

【问题标题】：New Coffeescript file interfering with other JS新的 Coffeescript 文件干扰其他 JS
【发布时间】：2012-11-19 00:55:33
【问题描述】：

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

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

【问题讨论】：

您能否尝试仅将 morris.js 文件包含在您正在制作图表的视图中，而不是将其添加到您的应用程序 js 文件中？如果这解决了你的崩溃问题，那就是 Morris 的问题，你应该在 github repo 上打开一个问题
这是您在 CoffeeScript 文件中的真正缩进吗？
是的！我没有学过coffeescript，只是从railscast中复制了一些，并添加了一些我自己的行/格式。它是一种空白语言吗？我搞砸了吗？我会试一试Magicmarkker的建议，但听起来如果我的格式错误可能与问题有关，所以我也会看看。我在格式中搞砸了什么具体的事情？
它是一种空白语言，这可能不是你想要的。您可能希望将除jQuery -> 行之外的所有内容缩进一次。看看this，看看我的意思。

标签： javascript jquery ruby-on-rails ruby-on-rails-3 coffeescript

【解决方案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' ]

【讨论】：

嗯。按照建议重新格式化，但现在（或者之前也可能，但现在肯定），它 a) 仍然无法在没有图表的页面上工作，并且 b) 甚至不能在图表页面上工作？！？！糟糕。
是的。似乎越来越像这是一个咖啡脚本格式错误。我将一些原始 js 代码粘贴到 js2coffee.org 中，它吐出的内容与我格式化的内容非常不同。我将深入研究coffeescript 并将其整理出来，然后粘贴最终为我工作的格式。（我认为 $ 标签也是一个问题）。谢谢大家的帮助！

【解决方案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 的借口！

【讨论】：