使用 jQuery Mobile 和 Rails 加载简单的 jqPlot答案

【问题标题】：Loading simple jqPlot with jQuery Mobile and Rails使用 jQuery Mobile 和 Rails 加载简单的 jqPlot
【发布时间】：2013-05-11 17:57:58
【问题描述】：

我正在尝试在我的 rails 应用程序上放置一个简单的 jqPlot，但我无法加载它。这是我的看法：

<div id='chart1' style="height:400px;width:300px; "></div>

<script>
$(document).bind('pageinit', function() {
      var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>

当我打开页面时，jQuery Mobile 微调器一直在运行，我在 JavaScript 控制台中收到此错误：

未捕获的类型错误：对象函数 (e,t){return new b.fn.init(e,t,r)} 没有方法'jqplot'

我已将适当的 jqPlot javascript 文件添加到我的 vendor/assets 文件夹并在我的 application.js 中引用它们，所以我认为这不是问题。

有趣的是（或者可能不是），如果我添加该行

jQuery.noConflict();

在 JavaScript 块的开头，我没有收到任何错误，并且页面加载正常，但没有 jqPlot.. 但是，我可以从 JavaScript 控制台引用 jqPlot。

我对 Web 开发很陌生，所以我可能缺少一些基本的东西。任何帮助将不胜感激！

【问题讨论】：

显示为您的页面示例。此错误表明 jqPlot 函数不存在，这意味着它是 jqPlot js 文件可能未初始化（或未正确初始化）。我可以告诉你，你不需要 jQuery.noConflict();，jqPlot 与 jQuery Mobile 配合得很好。
好吧，我的 vendor/assets/javascripts 文件夹中有 jquery.jqplot.min.js 文件，我在 application.js 中使用//= require jquery.jqplot.min.js 引用它。我对jqPlot .css 文件。我应该用另一种方式来初始化它，还是我误解了你？
哦，您正在使用 require，这可能是个问题。因为它使用的是异步 js 加载，可能 jqplot 在 pageinit 事件之后被初始化。尝试使用 pageshow 事件。
是的，这行得通，谢谢！如果我取出jQuery.noConflict();，我仍然会遇到同样的错误，不知道为什么会这样。
@Gajotres：我明白了。但我认为在使用 requireJs、PhoneGap 时你总是有一个 Fouc。我开始为此写splashview，这就像一个隐藏页面内容的启动屏幕，而 requireJs 将所有内容整合在一起（repo 需要更新:-)

标签： ruby-on-rails jquery-mobile jqplot

【解决方案1】：

我有一个plot 模块（文件jqplot.module.js），如下所示：

define([
      '../js/plugins/jqplot/jquery.jqplot'
    , 'css!../js/plugins/jqplot/jquery.jqplot'
],
function () {
    var plot;
    require([
        '../js/plugins/jqplot/plugins/jqplot.barRenderer'
      , '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer'
      , '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer'
      , '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer'
      , '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer'
      , '../js/plugins/jqplot/plugins/jqplot.pointLabels'
      , '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer'
      ],
    function () {
        plot = $.jqplot;
    });
    return plot;
  }
);

我在有问题的页面上这样称呼它：

require(['plot'],
    function () {
    // in here I have $.jqplot available
    }
);

在我的main.js 中，我声明了jqplot.module 的路径

plot:'../js/plugins/jqplot/jqplot.module'

对我来说很好。

【讨论】：