使用带有 Backbone 和 require.js 的谷歌图表

Question

我想在我的主干项目中使用 Google 图表（对于某些图表）。我正在使用 require.js，现在我有疑问如何使用 require.js 加载 Google API。

这里是官方的Google site，给出了如何使用它的基本说明

阅读这个主题后，我发现很多引用了 here 中的 require.js 插件

那是米勒·梅德罗斯先生 :) 我在使用此脚本时遇到问题：

这就是我所做的。

1. 我从 Miller GIT 代表处下载了异步脚本，并将其放入我的项目中

2. 在我的 main.js 中，我将其包含如下：

   baseURL: '.',
   paths: {
       underscore  : 'lib/underscore',
       backbone    : 'lib/backbone',
       async       : 'lib/async',
       babysitter  : 'lib/backbone.babysitter',
       wreqr       : 'lib/backbone.wreqr',
       marionette  : 'lib/backbone.marionette',
       handlebars  : 'lib/handlebars',
       jquery      : 'lib/jquery', 
   },
   

3. 现在我的问题是如何使用它？ 我所有的js文件都有以下结构：

   define([
   'marionette',
   //more defines...    
   
   ], function(
     Marionette
   //more calls here
   ) {
   

4. 如何使 Google 代码可用于我的应用程序？我只需要在一两个地方使用它就可以了:)

谢谢

Answer 1

从作者的例子看，用法好像是：

require([
    'async!http://maps.google.com/maps/api/js?sensor=false'
], function()
{
    //Google maps is available and all components are ready to use.
    var map = new google.maps.Map( 
    ...

所以你的情况可能是这样的

require([
    'async!https://www.google.com/jsapi'
], function()
{
    google.load('visualization', '1.0', {'packages':['corechart']});
    ... 

或定义为here

require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function()
{
    // visualization + corechart + geochart + search are loaded
    // code copied from google charts docs:
    // http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
    var data = new google.visualization.DataTable();

您需要从 repo (requirejs-plugins/src) 加载 goog.js，将其放入您的 lib 文件夹并在您的路径中定义为：

paths : {
    //alias to plugins
    async : 'lib/async',
    goog : ' lib/goog',

Answer 2

假设该库已经与 AMD 兼容，您可以通过在您的 define() 调用中简单地指向它（路径和所有）来使用它：

define([
 'marionette',
 'path/to/google/charts'
], function(Marionette, GoogleCharts) {
  // Stuff
});

现在，如果它不兼容 AMD，您需要使用 shim。