Require、Knockout 和 pager 是 Undefined TypeError

Question

我有以下主要内容：

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

此外 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 文件都是：（请注意，锡供应商类是我加载的外部库）

Answer 1

我设法通过在需要时将“ko”替换为“knockout”来修复它。

更具体地说是 main（您在 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();
});

此外，在我的项目中加载了 require 的其他 javascript 文件上，我更改了行：

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

与：

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

注意： 我还在其他页面上使用 require 加载的其他 main.js 上的这些行进行了更改：

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

改成：

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

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