Require,Knockout和pager是Undefined TypeError

时间:2016-03-05 17:28:46

标签: requirejs knockout-3.0 pager.js

我有以下主要内容:

requirejs.config({
  paths:{
    'text':'../vendor/js/text.min',

    'jquery':"../vendor/js/jquery.min",
    'boostrap':"../vendor/js/bootstrap.min",
    'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",
    'pager':"../vendor/js/pager",

    'imageGroupsVm':'../js/viewModels/imageGroupsViewModel',
    'panelVm':'../js/viewModels/panelViewModel',

    'compMessage':'../js/components/message',
    'extBooleanToggle':'../js/extenders/booleanToggle'
  },
  shim:{
    'bootstrap':['jquery'],
    'pager':['ko'],
    },
  waitSeconds: 200,
});

define(['jquery','ko','pager','panelVm'],function($,ko,pager,panelVm)
{
    pager.extendWithPage(panelVm);
    ko.applyBindings(panelVm);
    pager.start();
});

但出于某种原因,我收到了以下2条错误消息:

TypeError: ko is undefined
Stack trace:
pagerJsModule@http://localhost/symphotest/assets/vendor/js/pager.js:150:9
@http://localhost/symphotest/assets/vendor/js/pager.js:1506:20
newContext/context.execCb@http://localhost/symphotest/assets/vendor/js/require.min.js:1690:24
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:865:43
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable@http://localhost/symphotest/assets/vendor/js/require.min.js:1177:17
newContext/Module.prototype.init@http://localhost/symphotest/assets/vendor/js/require.min.js:783:21
callGetModule@http://localhost/symphotest/assets/vendor/js/require.min.js:1204:17
newContext/context.completeLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1604:1
newContext/context.onScriptLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1711:21
 require.min.js:900:37

TypeError: pager is undefined
Stack trace:
@http://localhost/symphotest/assets/js/panel-main.js:65:5
newContext/context.execCb@http://localhost/symphotest/assets/vendor/js/require.min.js:1690:24
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:865:43
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable@http://localhost/symphotest/assets/vendor/js/require.min.js:1177:17
newContext/Module.prototype.init@http://localhost/symphotest/assets/vendor/js/require.min.js:783:21
callGetModule@http://localhost/symphotest/assets/vendor/js/require.min.js:1204:17
newContext/context.completeLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1604:1
newContext/context.onScriptLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1711:21
 require.min.js:900:37

Furtermore panelViewModel.js包含:

define(['ko','imageGroupsVm','compMessage'],function(ko,ImageGroupsVM,loginViewModel)
{
  var image_groups=new ImageGroupsVM();


  return {'imageGroups':image_groups};
});

ImageGroupsViewModel包含:

define(['ko','jquery'],function(ko,$)
{
  console.log(ko);
  return function imageGroupsViewModel()
  {
    var self=this;

    self.albums=ko.observableArray();

    self.init=function()
    {
      self.albums([]);

      self.fetchData();
    }

    self.fetchData=function()
    {
      console.log("Data Fetched");
    };

    function Album(data)
    {

    }
  };
})

我拥有的所有JS文件都是:(注意锡供应商类是我加载的外部库)

Js Files

1 个答案:

答案 0 :(得分:2)

我设法通过替换&#39;&#39;与'淘汰赛'&#39;无论何时需要。

更具体地说,主要(你在html上的data-main中包含的文件)

以下一行:

'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

更改为:

'knockout':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

我包括在垫片中:

'pager':['knockout'],

define(['jquery','ko','pager','panelVm'],function($,ko,pager,panelVm)

已更改为

define(['jquery','knockout','pager','panelVm'],function($,ko,pager,panelVm)

因此我的主要是:

requirejs.config({
  paths:{
    'text':'../vendor/js/text.min',

    'knockout':"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min",
    'pager':"../vendor/js/pager.min",
    'jquery':"../vendor/js/jquery.min",
    'boostrap':"../vendor/js/bootstrap.min",

    'imageGroupsVm':'../js/viewModels/imageGroupsViewModel',
    'panelVm':'../js/viewModels/panelViewModel',

    'compMessage':'../js/components/message',
    'extBooleanToggle':'../js/extenders/booleanToggle'
  },
  shim:{
    'pager':['knockout'],
    'bootstrap':['jquery'],
    },
  waitSeconds: 200,
});

define(['jquery','knockout','pager','panelVm'],function($,ko,pager,panelVm)
{
    pager.extendWithPage(panelVm);
    ko.applyBindings(panelVm);
    pager.start();
});

另外在我的项目中加载了我的其他javascript文件需要我更改了行:

define(['ko',...,'other_lib'],function(ko,....,other_lib)

使用:

define(['knockout',...,'other_lib'],function(ko,....,other_lib)

注意: 我还改变了我在其他页面加载的其他main.js上的theese行:

'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

更改为:

'knockout':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

我这样做是为了通过使用require加载我制作的所有模块。