使用Handsontable和RequireJS

时间:2015-02-25 12:57:09

标签: requirejs handsontable

当使用requirejs填充Handsontable时,我不断收到以下错误和堆栈跟踪

Uncaught TypeError: undefined is not a function VM18361 handsontable.full.js:20729 
unformatNumeral                                 VM18361 handsontable.full.js:21325
numeral.fn.Numeral.unformat                     VM18361 handsontable.full.js:21325
numeral                                         VM18361 handsontable.full.js:21037

即使使用http://handsontable.com/中的示例,也会发生这种情况。

我的requirejs配置和使用handontable的模块看起来像这样

require.config({                                                                                                                                         
 paths: {
   handsontable : '/js/dependencies/handsontable.full'                                                                               
},                                                                              
shim: {                                                                            
  'handsontable': {                                                             
    deps: ['jquery'],                                                           
    exports: 'Handsontable'                                                     
  }
}                                                                         

define(['handsontable'], function(Handsontable) { 
  var data = [
    ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 3, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  var container = document.getElementById('example');

  var config = {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  };

  var hot = new Handsontable(container, config); 
});

有没有其他人遇到这个问题?

目前,我能看到的唯一解决方案是将handsontable作为全局对象(绕过管理依赖项的requirejs的整个目的)。

我很欣赏更好的解决方案。

谢谢!

1 个答案:

答案 0 :(得分:1)

我认为这里的问题是你使用完整版的Handsontable,其中包括依赖项,例如Numeral.js。由于某些依赖项符合AMD标准,即调用 define(),因此最终会引用Numeral.js而非Handsontable。

要正确使用它,您只需使用裸分发文件,handsontable.js,并包含该版本的Handsontable所需的所有依赖项。像这样:

require.config({                                                                                                                                         
  paths: {
    handsontable : '/js/dependencies/handsontable'                                                                               
  },                                                                              
  shim: {                                                                            
    'handsontable': {                                                             
      deps: ['moment', 'pikaday', 'zeroclipboard'],                                                           
      exports: 'Handsontable'                                                     
    }
  }
})

我不确定您使用的是哪个版本的Handsontable,当前版本0.20.3取决于时刻,pikaday和zeroclipboard。有关详细信息,请参阅dist/READEME.md